Feature/tab content selector

readme.md

@@ -92,6 +92,34 @@ $('.tabscontent').tabbedContent({
 })
 ```
 
+It is possible to limit/define the tab-content elements in the main-container by defining the `contentElements` attribute:
+
+```javascript
+$('.tabscontent').tabbedContent({
+    contentElements: '.tab-content' // you can also pass a jquery/zepto object containing the content elements
+})
+```
+This is usefull if you need to mix the different tab contents with other html elements to use in different breakpoints. You could display the tabs as accordion in mobile viewport by adding additional trigger links before each content container for example.
+```html
+<!-- linklist to be hidden on mobile -->
+<ul class="hid-mobile">
+    <li><a href="#tab-1">Tab 1</a></li>
+    <li><a href="#tab-2">Tab 2</a></li>
+</ul>
+<div class="tabscontent">
+    <!-- link only to be shown in mobile -->
+    <a class="vis-moblie" href="#tab1">Tab 1 Accordion</a>
+    <div class="tab-content" id="tab-1">
+        <!-- tab content -->
+    </div>
+    <!-- link only to be shown in mobile -->
+    <a class="vis-moblie" href="#tab1">Tab 2 Accordion</a>
+    <div class="tab-content" id="tab-2">
+        <!-- tab content -->
+    </div>
+</div>
+```
+
 ### Using with Zepto.js
 
 You'll need the [`data`](https://github.com/madrobby/zepto/blob/master/src/data.js)

src/tabbedcontent.js

@@ -10,19 +10,20 @@
 
   var Tabbedcontent = function(tabcontent, options) {
     var defaults = {
-        links         : tabcontent.prev().find('a').length ? tabcontent.prev().find('a') : '.tabs a', // the tabs itself. By default it selects the links contained in the previous wrapper or the links inside ".tabs a" if there's no previous item
-        errorSelector : '.error-message', // false to disable
-        speed         : false, // speed of the show effect. Set to null or false to disable
-        onSwitch      : false, // onSwitch callback
-        onInit        : false, // onInit callback
-        currentClass  : 'active', // current selected tab class (is set to the <a> element)
-        tabErrorClass : 'has-errors', // a class to be added to the tab where errorSelector is detected
-        history       : true, // set to false to disable HTML5 history
-        historyOnInit : true, // allows to deactivate the history for the intial autmatically tab switch on load
-        loop          : false // if set to true will loop between tabs when using the next() and prev() api methods
+        contentElements : false, // can be used to define content elements in container (either $ object containing the element or selector string)
+        links           : tabcontent.prev().find('a').length ? tabcontent.prev().find('a') : '.tabs a', // the tabs itself. By default it selects the links contained in the previous wrapper or the links inside ".tabs a" if there's no previous item
+        errorSelector   : '.error-message', // false to disable
+        speed           : false, // speed of the show effect. Set to null or false to disable
+        onSwitch        : false, // onSwitch callback
+        onInit          : false, // onInit callback
+        currentClass    : 'active', // current selected tab class (is set to the <a> element)
+        tabErrorClass   : 'has-errors', // a class to be added to the tab where errorSelector is detected
+        history         : true, // set to false to disable HTML5 history
+        historyOnInit   : true, // allows to deactivate the history for the intial autmatically tab switch on load
+        loop            : false // if set to true will loop between tabs when using the next() and prev() api methods
       },
       firstTime = false,
-      children  = tabcontent.children(),
+      children,
       history   = window.history,
       loc       = document.location,
       current   = null
@@ -34,6 +35,16 @@
       options.links = $(options.links);
     }
 
+    if (options.contentElements instanceof $) {
+      children = options.contentElements;
+    } else {
+      if (!options.contentElements) {
+        children = tabcontent.children();
+      } else {
+        children = tabcontent.find(options.contentElements);
+      }
+    }
+
     /**
      * Checks if the specified tab id exists.
      *
@@ -204,7 +215,7 @@
         return filterTab.apply(this, [tab]);
       }).attr('aria-selected','true').parent().addClass(options.currentClass);
       // Hide tabs
-      children.hide();
+      children.hide().addClass('state-hidden');
 
       // We need to force the change of the hash if we're using the API
       if (options.history && api) {
@@ -221,7 +232,7 @@
         if (options.speed) {
           onSwitch(tab);
         }
-      }).attr('aria-hidden','false');
+      }).removeClass('state-hidden').attr('aria-hidden','false');
       if (!options.speed) {
         onSwitch(tab);
       }
@@ -283,7 +294,7 @@
       }
       // Open first tab
       else {
-        switchTab("#" + children.filter(":first-child").attr("id"));
+        switchTab("#" + children.eq(0).attr("id"));
       }
       // Add a class to every tab containing errors
       if (options.errorSelector) {

test/fixture2.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+    <head></head>
+    <body>
+        <ul>
+            <li><a href="#tab-1">Tab 1</a></li>
+            <li><a href="#tab-2">Tab 2</a></li>
+            <li><a href="#tab-3">Tab 3</a></li>
+            <li><a href="#tab-n">Tab N</a></li>
+        </ul>
+        <div class="tabscontent">
+            <a href="#tab-1">Tab 1</a>
+            <div class="tabcontent-element" id="tab-1">
+                First tab content
+            </div>
+            <a href="#tab-2">Tab 2</a>
+            <div class="tabcontent-element" id="tab-2">
+                Second tab content
+            </div>
+            <a href="#tab-3">Tab 3</a>
+            <div class="tabcontent-element" id="tab-3">
+                Third tab content
+            </div>
+            <a href="#tab-4">Tab 4</a>
+            <div class="tabcontent-element" id="tab-n">
+                Fourth tab content
+            </div>
+        </div>
+    </body>
+</html>

test/tabbedcontent.spec.js

@@ -27,6 +27,21 @@ describe('$.fn.tabbedContent', () => {
 
       done()
     })
+
+    it('hides all contents except for the first tab and non content elements', (done) => {
+      loadFixtures('fixture2.html');
+      $('.tabscontent').tabbedContent({"contentElements": ".tabcontent-element"});
+
+      expect($('#tab-1')).toBeVisible()
+      expect($('#tab-2')).not.toBeVisible()
+      expect($('#tab-3')).not.toBeVisible()
+      expect($('#tab-n')).not.toBeVisible()
+      expect($('.tabscontent a:eq(0)')).toBeVisible()
+      expect($('.tabscontent a:eq(1)')).toBeVisible()
+      expect($('.tabscontent a:eq(2)')).toBeVisible()
+      expect($('.tabscontent a:eq(3)')).toBeVisible()
+      done();
+    })
   })
 
   describe('events', () => {