Bob Bob - 1 year ago 87
CSS Question

jQuery Accordion tab should close when the sidebar is closed

I have sidebar which opens when the plus icon is clicked and it has a an accordion, which can be opened and when the sidebar is closed without closing accordion. The accordion stays open.

Is there a way if the sidebar is closed the accordion should auto close.

Please see the below code:


<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>

<div class="cd-panel from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close"></a>
<div class="cd-panel-container">
<div class="nav-accord2">
<div id="accordion">
<h3 >Header</h3>
<div>Text 1</div>


$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");

//open the lateral panel
$('.cd-btn').on('click', function(event){
// CHECKING ICON OF .cd-btn-a
if($('.cd-btn-a').hasClass('glyphicon-minus-sign')) {
$('.cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $('.cd-panel') || $('.cd-panel-close') ) {
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");

$( function() {
var icons = {
header: "ui-icon-caret-1-s",
activeHeader: "ui-icon-caret-1-n"
$( "#accordion" ).accordion({
icons: icons
$( "#toggle" ).button().on( "click", function() {
if ( $( "#accordion" ).accordion( "option", "icons" ) ) {
$( "#accordion" ).accordion( "option", "icons", null );
} else {
$( "#accordion" ).accordion( "option", "icons", icons );
} );
$("#accordion").accordion({ header: "h3", collapsible: true, active: false, heightStyle: "content"});

Answer Source

You need to use

$( "#accordion" ).accordion('option', {active: false});


Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download