I have a sidebar that opens when the plus icon is clicked. Inside the sidebar, there is an accordion that can be opened independently. Even when the sidebar is closed, the accordion remains open.
Is it possible to automatically close the accordion when the sidebar is closed?
Please refer to the following code: https://jsfiddle.net/bob_js/kefq1bxo/
HTML:
<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close"></a>
</header>
<div class="cd-panel-container">
Content
<div class="nav-accord2">
<div id="accordion">
<h3 >Header</h3>
<div>Text 1</div>
</div>
</div>
</div>
jQuery:
$(".glyphicon-minus-sign, .glyphicon-plus-sign").click(function(){
$(this).toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
});
jQuery(function($){
//open the lateral panel
$('.cd-btn').on('click', function(event){
event.preventDefault();
$('.cd-panel').toggleClass('is-visible');
// CHECKING ICON OF .cd-btn-a
if($('.cd-btn-a').hasClass('glyphicon-minus-sign')) {
$('.cd-btn-a').toggleClass('glyphicon-minus-sign glyphicon-plus-sign');
$('.cd-panel-a').removeClass('is-visible');
}
});
//close the lateral panel
$('.cd-panel').on('click', function(event){
if( $(event.target).is('.cd-panel') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel').removeClass('is-visible');
$('.cd-btn').toggleClass("glyphicon-minus-sign glyphicon-plus-sign");
event.preventDefault();
}
});
});
$(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"});