Responsive design is essential in modern web development.
This article explains in detail how to use jquery.responsiveTabs.js to display content areas as tabs, which switch to an accordion format on smartphones.
Basic CSS for Responsive Tab Switching
The following is an example CSS description for the responsive tab switching display area (.r-tabs). Customize as needed.
<style type="text/css">
body{
text-align: center;
}
h1{
text-align: center;
font-size: 22px;
padding: 20px 0;
line-height: 2em;
}
.r-tabs .r-tabs-nav {
margin: 0;
padding: 0;
}
.r-tabs .r-tabs-tab {
display: inline-block;
margin: 0;
list-style: none;
}
.r-tabs .r-tabs-panel {
padding: 15px;
display: none;
}
.r-tabs .r-tabs-accordion-title {
display: none;
}
.r-tabs .r-tabs-panel.r-tabs-state-active {
display: block;
}
/* Accordion responsive breakpoint */
@media only screen and (max-width: 768px) {
.r-tabs .r-tabs-nav {
display: none;
}
.r-tabs .r-tabs-accordion-title {
display: block;
}
}
/* Tabs container */
.r-tabs {
position: relative;
background-color: #00c5ad;
border-top: 1px solid #00c5ad;
border-right: 1px solid #00c5ad;
border-left: 1px solid #00c5ad;
border-bottom: 4px solid #00c5ad;
border-radius: 4px;
}
/* Tab element */
.r-tabs .r-tabs-nav .r-tabs-tab {
position: relative;
background-color: #00c5ad;
}
/* Tab anchor */
.r-tabs .r-tabs-nav .r-tabs-anchor {
display: inline-block;
padding: 10px 12px;
text-decoration: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
font-size: 14px;
font-weight: bold;
color: #fff;
}
/* Disabled tab */
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
opacity: 0.5;
}
/* Active state tab anchor */
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
color: #00c5ad;
text-shadow: none;
background-color: white;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
/* Tab panel */
.r-tabs .r-tabs-panel {
background-color: white;
border-bottom: 4px solid white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
/* Accordion anchor */
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
display: block;
padding: 10px;
background-color: #00c5ad;
color: #fff;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
font-size: 14px;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
}
/* Active accordion anchor */
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #00c5ad;
text-shadow: none;
}
/* Disabled accordion button */
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
opacity: 0.5;
}
</style>
HTML Structure
Next, check the HTML structure. Define the tab area and its content.
Prepare a list tag for tab click areas and switchable content areas (id=”tab-1″ to id=”tab-4″) inside the tab content area (id=”horizontalTab”).
<div id="horizontalTab">
<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-4">TAB-4</a></li>
</ul>
<div id="tab-1">
<p>TAB-1 content area TAB-1 content area TAB-1 content area TAB-1 content area TAB-1 content area TAB-1 content area TAB-1 content area TAB-1 content area TAB-1 content area TAB-1 content area</p>
</div>
<div id="tab-2">
<p>TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area TAB-2 content area</p>
</div>
<div id="tab-3">
<p>TAB-3 content area TAB-3 content area TAB-3 content area</p>
</div>
<div id="tab-4">
<p>TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area TAB-4 content area</p>
</div>
</div>
JavaScript Implementation
Finally, here’s the JavaScript code to make tab switching work using jquery.responsiveTabs.js.
Load the files: jquery-2.1.0.min.js and jquery.responsiveTabs.js. Then use $(‘tab content area’).responsiveTabs({options}) to set it up.
Copy and use the following code:
<script src="jquery-2.1.0.min.js"></script>
<script src="jquery.responsiveTabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#horizontalTab').responsiveTabs({
rotate: false,
startCollapsed: 'accordion',
collapsible: 'accordion',
setHash: true,
click: function(e, tab) {
},
activate: function(e, tab) {
},
activateState: function(e, state) {
}
});
});
</script>
Demo Page of Responsive Tab Switching using jquery.responsiveTabs.js
To see it in action, please visit the following demo page.
Demo Page of Responsive Tab Switching using jquery.responsiveTabs.js
Source: jQuery Responsive Tabs
For more details, refer to the official documentation.
jQuery Responsive Tabs
Conclusion
By using jquery.responsiveTabs.js, you can easily implement responsive tab switching.
This article introduced basic implementations of CSS, HTML, and JavaScript.
Feel free to expand the design and functionality as needed and use it in a way that best fits your project.
*Please use at your own risk when reusing.
Do not reuse the Google Analytics tag in the demo page’s head tag.
