There is an issue with the sidepanel functionality, where the PLUS symbol changes to a minus when the panel is open but doesn't revert back to PLUS when closed. Additionally, I would like users to be able to click the minus symbol to close the sidepanel as well.
If it's not clear, you can check out this live example on JsFiddle: https://jsfiddle.net/bob_js/h9yfbden/1/
Here is the HTML code snippet:
<div class="container">
<i class="glyphicon glyphicon-plus-sign cd-btn"></i>
</div>
<div class="cd-panel-nvv from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close"></a>
</header>
<div class="cd-panel-container">
Content
</div>
</div>
CSS related to the icons and styles:
.glyphicon-plus-sign, .glyphicon-minus-sign{
/* CSS styling for plus and minus symbols */
}
/* More CSS styles here */
The jQuery script used for toggle functionality:
$(".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').addClass('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');
event.preventDefault();
}
});
});