Tabs are quite useful when it comes to fitting a lot of content in a clean and organized way. Tabs help to separate information into different groups and the content is accessed easily by the users.
But the problem is when you need to include many tabs and the website should look adequately on mobile devices.
If you are using a grid-based framework such as Foundation or Bootstrap, you will see that they have tabs included in the framework components but they do not look good on mobile phones and tablets.
Usually, the tabs are not reduced in size according to the viewport but positioned one below another which makes the whole tab content difficult to deal with. Such annoying experience affects the users in a way that it reflects the page views, bounce rate and ranking in Google.
For all that reasons, I would like to present a jQuery solution which fixes all the issues with tabs on mobile phones and tablets.
TabDancer is a straightforward plugin that will take care of the many tabs you have and hide the ones that do not fit. When it is done, a new “MORE” tab replaces the hidden tabs so it is easy for the users to choose a tab to view. When users click on the + More tab, an animated list of all the tabs appears.
Have a look at the code below to see how to use it on your website.
HTML
Write a simple markup that includes an unordered list (UL) with a DIV that includes the tab content as follows:
<ul class="tabs js-tabs-responsive" data-more-tabs-text="More"> <li class="tab-active"><a href="#tab-content-1">Tab One</a></li> <li><a href="#tab-content-2">Tab Two</a></li> <li><a href="#tab-content-3">Tab Three</a></li> <li><a href="#tab-content-4">Tab Four</a></li> <li><a href="#tab-content-5">Tab Five</a></li> <li><a href="#tab-content-6">Tab Six</a></li> </ul> <div class="js-tab-content-container"> <div class="js-tab-content" id="tab-content-1">Tab content 1</div> <div class="js-tab-content" id="tab-content-2">Tab content 2</div> <div class="js-tab-content" id="tab-content-3">Tab content 3</div> <div class="js-tab-content" id="tab-content-4">Tab content 4</div> <div class="js-tab-content" id="tab-content-5">Tab content 5</div> <div class="js-tab-content" id="tab-content-6">Tab content 6</div> </div>
Pay attention to the all the classes and the data attributes on the UL.
CSS
This are the default styles for the responsive tabs which can be easily changed to fit the look on your website.
.js-tabs-container {position: relative;}
.js-tab-content-container {margin-top: -1px;padding: 20px;background: #f5f5f5;-webkit-border-bottom-right-radius: 4px;-webkit-border-bottom-left-radius: 4px;-moz-border-radius-bottomright: 4px;-moz-border-radius-bottomleft: 4px;border-bottom-right-radius: 4px;border-bottom-left-radius: 4px;}
.js-tab-content {display: none;}
.no-js .js-tab-content {display: block;}
.tabs {margin: 0;padding: 0;list-style: none;display: block;overflow: hidden;position: relative;}
.tabs:before, .tabs:after {content: ""; display: table;}
.tabs:after {clear: both;zoom: 1;}
.tabs li {float: left;margin-left: 5px;}
.tabs li:first-child {margin-left: 0;}
.tabs li, .tabs li a, .js-tab-stack li.tab-available {display: block;}
.tabs li a {padding: 0.55em 1.1em;text-decoration: none;-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;-moz-border-radius-topleft: 4px;-moz-border-radius-topright: 4px;border-top-left-radius: 4px;border-top-right-radius: 4px;color: #337AB7;}
.tabs li a:hover {background: #f5f5f5;}
.tabs .tab-active a, .tabs .tab-active a:hover {cursor: default;color: #337AB7;background: #f5f5f5;}
.js-tab-content-container:focus {outline: none;}
li.js-tab-toggler {display: none;float: right;}
.js-tab-stack li {display: none;}
.js-tab-stack li.tab-available, .js-tab-stack li.tab-active, .js-tab-stack-open li, .js-tab-stack li.js-tab-toggler {display: block;}
.js-tab-toggler a:after {content: " +";}
.js-tab-stack-open li.js-tab-clone, .js-tab-stack-open-complete li {clear: left;}
.js-tab-clone-container {position: absolute;top: 0; left: 0;visibility: hidden;}
.js-tab-stack-open li.js-tab-clone, .js-tab-stack-open li.js-ready-for-anim, .js-tab-stack-open-complete li {margin-left: 0;}
li.js-ready-for-anim {position: absolute;transition: all 500ms cubic-bezier(0.130, 0.965, 0.380, 0.985);}
li.js-ready-for-anim a:hover {background: none;}
.js-tab-stack-open li.tab-active a:hover {background: #337AB7;}
.js-tab-stack-open li.js-tab-toggler {display: none;}
JS
The last bit is to add the necessary jQuery library, the script for the plugin and a simple code snippet to trigger the functionality.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="jquery.tabdancer.js"></script>
<script>
$(document).ready(function(){
$('.js-tabs-responsive').TabDancer();
});
</script>
Have a look at the demo to see how the tabs work when the viewpoint is resized.