Add responsive tabs

README.md

@@ -46,7 +46,7 @@ bower install simpletabs
 <script src="/path/to/simpletabs.js"></script>
 ```
 
-A full working example is on [CodePen](http://codepen.io/romulomachado/full/rVYVqr/).
+A full working example is on [CodePen](http://codepen.io/magalhaespaulo/full/MaOqpo/).
 
 ## Contributing
 

dist/simpletabs.css

@@ -5,3 +5,15 @@
 .content__item.is-active {
   display: block;
 }
+
+@media (max-width: 767px) {
+  .large__screen {
+    display: none;
+  }
+}
+
+@media (min-width: 768px) {
+  .small__screen {
+    display: none;
+  }
+}

dist/simpletabs.js

@@ -32,6 +32,17 @@
         },
         updateURLHash: function() {
           return window.location.hash = this._element.data('tab');
+        },
+        responsiveTab: function() {
+          var elements, list;
+          list = this._element.parent().parent();
+          elements = $(list).find('li');
+          return elements.each(function(i) {
+            var content, dataTab;
+            dataTab = $('[data-tab]')[i].attributes['data-tab'].nodeValue;
+            content = $('[data-content=\'' + dataTab + '\']')[0];
+            return $(this).addClass('large__screen').clone().removeClass('large__screen').addClass('small__screen').insertBefore(content);
+          });
         }
       };
     };
@@ -42,10 +53,12 @@
           hash = window.location.hash.replace('#', '');
           tabs = new hashTabs();
           tabs.element($('[data-tab=\'' + hash + '\']'));
+          tabs.responsiveTab();
           return tabs.updateTab();
         } else {
           tabs = new hashTabs();
           tabs.element($('[data-tab]').first());
+          tabs.responsiveTab();
           return tabs.updateTab(updateHash = false);
         }
       });
@@ -65,4 +78,4 @@
       });
     }
   });
-}.call(this));
+}.call(this));

simpletabs.coffee

@@ -25,16 +25,26 @@ $ ->
     updateURLHash: ->
       window.location.hash = this._element.data('tab')
 
+    responsiveTab: ->
+      list = this._element.parent().parent();
+      elements = $(list).find('li')
+      elements.each (i) ->
+        dataTab = $('[data-tab]')[i].attributes['data-tab'].nodeValue
+        content = $('[data-content=\'' + dataTab + '\']')[0]
+        $(this).addClass('large__screen').clone().removeClass('large__screen').addClass('small__screen').insertBefore(content)
+
   if $('[data-tab]').length
     $(window).on 'load', ->
       if window.location.hash != ""
         hash = window.location.hash.replace("#", "")
         tabs = new hashTabs()
         tabs.element $("[data-tab='"+hash+"']")
+        tabs.responsiveTab()
         tabs.updateTab()
       else
         tabs = new hashTabs()
         tabs.element $("[data-tab]").first()
+        tabs.responsiveTab()
         tabs.updateTab(updateHash=false)
 
     $(window).on 'hashchange', ->
@@ -47,4 +57,4 @@ $ ->
       tabs = new hashTabs()
       tabs.element $(this)
       tabs.updateTab()
-      e.preventDefault()
+      e.preventDefault()