Responsive Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eu scelerisque eros. Fusce ante orci, hendrerit sit amet metus sit amet, venenatis sodales felis. Morbi vel mi in leo dignissim convallis in a neque. Suspendisse sollicitudin nibh non dapibus condimentum. Etiam sit amet arcu ultricies, porttitor justo eget, scelerisque urna. Praesent non ligula nec ligula euismod condimentum eget sed augue. Ut feugiat, turpis id sollicitudin vestibulum, tellus massa adipiscing nisl, quis cursus nisl arcu vel ipsum.

Quisque sodales sodales lacus pharetra bibendum. Etiam commodo non velit ac rhoncus. Mauris euismod purus sem, ac adipiscing quam laoreet et. Praesent vulputate ornare sem vel scelerisque. Ut dictum augue non erat lacinia, sed lobortis elit gravida. Proin ante massa, ornare accumsan ultricies et, posuere sit amet magna. Praesent dignissim, enim sed malesuada luctus, arcu sapien sodales sapien, ut placerat eros nunc vel est. Donec tristique mi turpis, et sodales nibh gravida eu. Etiam odio risus, porttitor non lacus id, rhoncus tempus tortor. Curabitur tincidunt molestie turpis, ut luctus nibh sollicitudin vel. Sed vel luctus nisi, at mattis metus. Aenean ultricies dolor est, a congue ante dapibus varius. Nulla at auctor nunc. Curabitur accumsan feugiat felis ut pretium. Praesent semper semper nisi, eu cursus augue.

Mauris facilisis elit ut sem eleifend accumsan molestie sit amet dolor. Pellentesque dapibus arcu eu lorem laoreet, vitae cursus metus mattis. Nullam eget porta enim, eu rutrum magna. Duis quis tincidunt sem, sit amet faucibus magna. Integer commodo, turpis consequat fermentum egestas, leo odio posuere dui, elementum placerat eros erat id augue. Nullam at eros eget urna vestibulum malesuada vitae eu mauris. Aliquam interdum rhoncus velit, quis scelerisque leo viverra non. Suspendisse id feugiat dui. Nulla in aliquet leo. Proin vel magna sed est gravida rhoncus. Mauris lobortis condimentum nibh, vitae bibendum tortor vehicula ac. Curabitur posuere arcu eros.

Donec egestas facilisis sapien sit amet euismod. Donec mollis lectus neque, in consectetur magna sodales et. Nam rutrum libero vitae magna sollicitudin aliquet. In tristique ultrices euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse pretium congue sodales. Curabitur egestas, metus sed ultrices suscipit, metus nibh vehicula ligula, vel volutpat sapien nibh sed quam. Etiam elementum nisi eu risus congue, ut eleifend lectus ultricies. Vivamus in ligula fermentum, bibendum sapien eget, pretium est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec ut ante non risus rutrum faucibus.

Proin dignissim faucibus odio sollicitudin sagittis. Phasellus aliquet, erat vitae mollis consectetur, enim lectus ornare libero, et porta mi dui eu tellus. Morbi lobortis, elit at euismod porta, magna lacus mattis massa, a lacinia ligula risus et lectus. Sed et aliquam ligula. Nunc venenatis orci magna, quis facilisis sem porta non. Nunc sodales arcu in consectetur malesuada. Maecenas varius justo lacus, scelerisque viverra tellus luctus eu. Nam imperdiet ultricies suscipit. Ut urna mauris, eleifend quis lacinia non, mollis id libero. Praesent pharetra viverra ipsum at posuere. Quisque commodo tortor nec hendrerit faucibus. Fusce convallis urna et vehicula tincidunt. Duis sed vehicula justo, eu placerat nisi. Donec facilisis augue non turpis semper, eget condimentum mauris malesuada. Nunc in dignissim mi, sed laoreet felis.

Provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint.

Go fork me on github!

Fork me on GitHub

Features

Tabs transform to accordion based on breakpoint
Uses javascript / jQuery for the technical tab switching (class based)
Uses CSS for the desktop/tablet/mobile view
Has callback events for the tab events
Tabs can be opened with URL hashes
Tabs can auto rotate
Tabs can be collapsed (optional)
Tabs can start collapsed based on the view (optional)
Tabs can be disabled
The tabs are controllable with API methods
Cross browser compatibility (IE7+, Chrome, Firefox, Safari and Opera)
Multiple device support (Web, Tablet, Mobile, etc)

Get

Bower

1
bower install responsive-tabs

npm

1
npm install responsive-tabs
usage
  • Make sure you’ve got jQuery added to your page (minimaly jQuery 1.7.0)
  • Include jquery.responsiveTabs.js
1
<script src="js/jquery.responsiveTabs.js"></script>
  • Include responsive-tabs.css for the basic Tabs to Accordion switching
1
<link type="text/css" rel="stylesheet" href="css/responsive-tabs.css" />
  • Include style.css for a basic tab/accordion theme
1
2
<!-- Edit this file to change the style of the tabs/accordion -->
<link type="text/css" rel="stylesheet" href="css/style.css" />
  • Use this HTML markup:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<div id="responsiveTabsDemo">
    <ul>
        <li><a href="#tab-1"> .... </a></li>
        <li><a href="#tab-2"> .... </a></li>
        <li><a href="#tab-3"> .... </a></li>
    </ul>

    <div id="tab-1"> ....... </div>
    <div id="tab-2"> ....... </div>
    <div id="tab-3"> ....... </div>
</div>
  • Use this jQuery function to enable responsive tabs on the selected element:
1
2
3
$('#responsiveTabsDemo').responsiveTabs({
    startCollapsed: 'accordion'
});