Tabs to Accordions
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function( $ ){ | |
$('#tabs1').responsiveTabs({ | |
startCollapsed: 'accordion', | |
// Add other parameters | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment