Updating multi-type-list

css/styles.css

@@ -4331,24 +4331,22 @@ fieldset,
     .mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
       color: #000; }
 
-/* Style the tab */
-.uw-multi-type-list-tab {
+.uw-tab {
   background-color: #f1f1f1;
   border: 1px solid #ccc;
   overflow: hidden; }
-  .uw-multi-type-list-tab button {
+  .uw-tab button {
     background-color: inherit;
     cursor: pointer;
     float: left;
     outline: none;
     padding: 14px 16px;
     transition: 0.3s; }
-    .uw-multi-type-list-tab button:hover {
+    .uw-tab button:hover {
       background-color: #ddd; }
-    .uw-multi-type-list-tab button:active {
+    .uw-tab button:active {
       background-color: #ccc; }
 
-/* Style the tab content */
 .uw-tabcontent {
   border: 1px solid #ccc;
   display: none;

js/component_scripts.min.js

@@ -117,21 +117,34 @@
     attach: function (context, settings) {
 
       $(document).ready(function() {
-        if ($('.uw-multi-type-list-tab').length > 0) {
 
+        // If there are tabs, process them.
+        if ($('.uw-tab').length > 0) {
+
+          // Set the first of the tabs to be displayted.
           $('.uw-tabcontent')[0].style.display = 'block';
 
+          // Step through each of the tab buttons and add the click.
           $('.uw-tablinks').each(function(index, value) {
-            var type = this.getAttribute('data-type');
-            this.click(function() {
-              openTab(type);
+
+            // Add the click function to open the tab.
+            $(value).click(function() {
+
+              // The open tab function with the data attribute.
+              openTab(this.getAttribute('data-type'));
             });
           });
         }
       });
 
-      function openTab(cityName) {
-        alert('CLICKED');
+      /**
+       * Function to open a tab.
+       *
+       * @param contentType
+       *   The type of tab to open.
+       */
+      function openTab(contentType) {
+
         // Declare all variables
         var i, tabcontent, tablinks;
 
@@ -148,7 +161,7 @@
         }
 
         // Show the current tab, and add an "active" class to the button that opened the tab
-        document.getElementById(cityName).style.display = "block";
+        document.getElementById(contentType).style.display = "block";
         evt.currentTarget.className += " active";
       }
     }

source/_patterns/04-components/multi-type-list/_multi-type-list.scss

-/* Style the tab */
-.uw-multi-type-list-tab {
+.uw-tab {
   background-color: #f1f1f1;
   border: 1px solid #ccc;
   overflow: hidden;
@@ -22,7 +21,6 @@
   }
 }
 
-/* Style the tab content */
 .uw-tabcontent {
   border: 1px solid #ccc;
   display: none;

source/_patterns/04-components/multi-type-list/multi-type-list.js

@@ -3,21 +3,34 @@
     attach: function (context, settings) {
 
       $(document).ready(function() {
-        if ($('.uw-multi-type-list-tab').length > 0) {
 
+        // If there are tabs, process them.
+        if ($('.uw-tab').length > 0) {
+
+          // Set the first of the tabs to be displayted.
           $('.uw-tabcontent')[0].style.display = 'block';
 
+          // Step through each of the tab buttons and add the click.
           $('.uw-tablinks').each(function(index, value) {
-            var type = this.getAttribute('data-type');
-            this.click(function() {
-              openTab(type);
+
+            // Add the click function to open the tab.
+            $(value).click(function() {
+
+              // The open tab function with the data attribute.
+              openTab(this.getAttribute('data-type'));
             });
           });
         }
       });
 
-      function openTab(cityName) {
-        alert('CLICKED');
+      /**
+       * Function to open a tab.
+       *
+       * @param contentType
+       *   The type of tab to open.
+       */
+      function openTab(contentType) {
+
         // Declare all variables
         var i, tabcontent, tablinks;
 
@@ -34,7 +47,7 @@
         }
 
         // Show the current tab, and add an "active" class to the button that opened the tab
-        document.getElementById(cityName).style.display = "block";
+        document.getElementById(contentType).style.display = "block";
         evt.currentTarget.className += " active";
       }
     }

source/_patterns/04-components/multi-type-list/multi-type-list.twig

-<div class="uw-multi-type-list-tab">
+<div class="uw-tab">
   {% for type, list in lists %}
     <button class="uw-tablinks" data-type="{{ type }}">{{ type }}</button>
   {% endfor %}
@@ -48,6 +48,6 @@
           'content': content.content
         } %}
       {% endif %}
-    </div>
-  {% endfor %}
+    {% endfor %}
+  </div>
 {% endfor %}
\ No newline at end of file