This time I will share jQuery Plugin and tutorial about Lightweight jQuery Responsive Tabs & Accordion Plugin – Responsive Tabs, hope it will help you in programming stack.
| File Size: | 83.7 KB |
|---|---|
| Views Total: | 43811 |
| Last Update: | |
| Publish Date: | |
| Official Website: | Go to website |
| License: | MIT |
Responsive Tabs is a lightweight and simple jQuery plugin for responsive tabbed interface that will transform to an accordion on window size change.
Installation:
1 |
# NPM |
2 |
$ npm install responsive-tabs --save |
3 |
4 |
# Bower |
5 |
$ bower install responsive-tabs --save |
Basic Usage:
1. Include jQuery library and jQuery Responsive Tabs Plugin on the web page
1 |
<script src="/path/to/cdn/jquery.min.js"></script> |
2 |
<script src="/path/to/cdn/jquery.responsiveTabs.js"></script> |
2. Include required css file to style the plugin
1 |
<link rel="stylesheet" href="css/responsive-tabs.css" /> |
3. Create the html for the tab navigation & tabbed content.
01 |
<div id="horizontalTab"> |
02 |
<ul> |
03 |
<li><a href="#tab-1">Responsive Tab-1</a></li> |
04 |
<li><a href="#tab-2">Responsive Tab-2</a></li> |
05 |
<li><a href="#tab-3">Responsive Tab-3</a></li> |
06 |
</ul> |
07 |
<div id="tab-1"> |
08 |
<p> ... </p> |
09 |
</div> |
10 |
<div id="tab-2"> |
11 |
<p> ... </p> |
12 |
</div> |
13 |
<div id="tab-3"> |
14 |
<p> ... </p> |
15 |
</div> |
16 |
</div> |
4. The necessary CSS styles. Copy the following CSS snippets and paste them into your document or directly include the stylesheet responsive-tabs.css on the page.
01 |
.r-tabs .r-tabs-nav { |
02 |
margin: 0; |
03 |
padding: 0; |
04 |
} |
05 |
06 |
.r-tabs .r-tabs-tab { |
07 |
display: inline-block; |
08 |
margin: 0; |
09 |
list-style: none; |
10 |
} |
11 |
12 |
.r-tabs .r-tabs-panel { |
13 |
padding: 15px; |
14 |
display: none; |
15 |
} |
16 |
17 |
.r-tabs .r-tabs-accordion-title { |
18 |
display: none; |
19 |
} |
20 |
21 |
.r-tabs .r-tabs-panel.r-tabs-state-active { |
22 |
display: block; |
23 |
} |
24 |
25 |
/* <a href="https://www.jqueryscript.net/accordion/">Accordion</a> responsive breakpoint */ |
26 |
@media only screen and (max-width: 768px) { |
27 |
.r-tabs .r-tabs-nav { |
28 |
display: none; |
29 |
} |
30 |
31 |
.r-tabs .r-tabs-accordion-title { |
32 |
display: block; |
33 |
} |
34 |
} |
5. Call the plugin to enable the responsive tabs plugin.
01 |
$(function(){ |
02 |
$('#horizontalTab').responsiveTabs({ |
03 |
04 |
// Start with the panels collapsed if the view is currently accordion based |
05 |
startCollapsed: 'accordion', |
06 |
07 |
// Tabs can be collapsed |
08 |
collapsible: true, |
09 |
10 |
// Tabs auto rotate |
11 |
rotate: false |
12 |
|
13 |
}); |
14 |
}); |
6. All plugin options with default values.
01 |
// called after a tab is selected |
02 |
active: null, |
03 |
04 |
// specify the event that activates a tab |
05 |
event: 'click', |
06 |
07 |
// An array with zero based integers that define the tabs that should be disabled |
08 |
disabled: [], |
09 |
10 |
// If set to 'true' the panels are collapsible. |
11 |
// 'tabs', 'accordion', true or false |
12 |
collapsible: 'accordion', |
13 |
14 |
// Defines if the first panel on load starts collapsed or not. |
15 |
// 'tabs', 'accordion', true or false |
16 |
startCollapsed: false, |
17 |
18 |
// auto rotate the tabs |
19 |
rotate: false, |
20 |
21 |
// the setting of a reference to the selected tab in the URL hash. |
22 |
setHash: false, |
23 |
24 |
// enables the animation of the panels |
25 |
// 'default', 'fade' or 'slide' |
26 |
animation: 'default', |
27 |
28 |
// queues the animation |
29 |
// e.g. true, false, 'accordion', 'tabs' |
30 |
animationQueue: false, |
31 |
32 |
// animation duration |
33 |
duration: 500, |
34 |
35 |
// makes the height auto adapt to the content |
36 |
fluidHeight: true, |
37 |
38 |
// auto scroll to the accordion panel |
