Responsive Layouts – Going from a Tab Layout to an Accordion in WordPress

There is a nice responsive tabs plugin which is jQuery based called aptly called Responsive-Tabs, it handles changing the layout from a tabbed contant structure to an accordion layout at a set media query size. The accordion layout is better suited for smaller mobile/tablet sizes.

Going from tab to accordion…

tab-layout

To a smaller viewport setting…

accordion-layout Basic HTML Structure

<div id="tabs1">
<ul>
<li><a href="#tab-1">this is the first link</a></li>
<li><a href="#tab-2">this is the second link</a></li>
<li><a href="#tab-3">this is the third link</a></li>
</ul>
<div id="tab-1">this is the first link content</div>
<div id="tab-2">this is the second link content</div>
<div id="tab-3">this is the third link content</div>
</div>
view raw html.html hosted with ❤ by GitHub

 

jQuery & CSS Set Up

Download the plugin and extract jquery.responsiveTabs.min.js and file in your js theme folder also get the CSS files and file in your css folder, the plugin comes with 2 of them, I have put them together and slightly adjusted them to remove demo styling and give a more neutral initial style. Also adding some dashicon icons for the open/close symbols.

My CSS file is below.

/* Tabs container */
.r-tabs {
position: relative;
background-color: #444;
border-top: 1px solid #444;
border-right: 1px solid #444;
border-left: 1px solid #444;
border-bottom: 4px solid #444;
border-radius: 4px;
}
/* Tab element */
.r-tabs .r-tabs-nav .r-tabs-tab {
position: relative;
background-color: #444;
display: inline-block;
margin: 0;
list-style: none;
}
/* 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-weight: bold;
color: #fff;
font-size: .9em;
}
/* 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: #444;
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;
padding: 15px;
display: none;
}
/* Accordion anchor */
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
display: block;
padding: 10px;
background-color: #444;
color: #fff;
font-weight: bold;
text-decoration: none;
text-shadow: 0 1px rgba(0, 0, 0, 0.4);
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: #444;
text-shadow: none;
}
/* Disabled accordion button */
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
opacity: 0.5;
}
.r-tabs .r-tabs-nav {
margin: 0;
padding: 0;
}
.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: 650px) { /* Set to desired media size for accordion layout */
.r-tabs {
border-radius: 0;
}
.r-tabs .r-tabs-nav {
display: none;
}
.r-tabs .r-tabs-panel {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.r-tabs .r-tabs-accordion-title {
display: block;
}
.r-tabs-accordion-title .r-tabs-anchor:after {
content: "\f132";
font-family: 'dashicons';
float: right;
}
.r-tabs-state-active .r-tabs-anchor:after {
content: "\f460";
font-family: 'dashicons';
float: right;
}
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
border-bottom: 1px solid;
}
.r-tabs .r-tabs-panel.r-tabs-state-active {
display: block;
opacity: 0.9;
}
}
view raw tabs-css.css hosted with ❤ by GitHub

Then also create a jQuery init file tabs-init.js and also save in your js folder

jQuery(function( $ ){
$('#tabs1').responsiveTabs({
startCollapsed: 'accordion',
// Add other parameters
});
});
view raw tabs-init.js hosted with ❤ by GitHub

The init file is using the id #tabs1 which is the id used in the html structure, use what you like and for more parameters check out the options here.

Now enqueue these 2 script files and CSS in your functions.php file…

<?php
//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'tabsalot_enqueue_scripts_styles' );
function tabsalot_enqueue_scripts_styles() {
wp_enqueue_script( 'tabs-init' , get_stylesheet_directory_uri() . '/js/tabs-init.js', array( 'tabsjs' ), '1', true );
wp_enqueue_script( 'tabsjs' , get_stylesheet_directory_uri() . '/js/jquery.responsiveTabs.js', array( 'jquery' ), '1', true );
wp_enqueue_style( 'tabscss' , get_stylesheet_directory_uri() . '/css/responsive-tabs.css', array(), '1.0.0', 'all' );
wp_enqueue_style( 'dashicons' ); // for the + and - on the accordions
}
view raw functions.php hosted with ❤ by GitHub

That’s it – I have written something similar using Tabslet and ACF, you can incorporate the ACF repeater code straight in, as the HTML mark up is the same. If you are after a straight up WordPress plugin and shortcode there is the very popular Tabby Responsive Tabs.

Since I have also posted this using ACF on ACF Extras website.

Leave a Comment





%d bloggers like this: