Bob Bob - 1 month ago 20
CSS Question

multiple sidepanels transition javascript

I have multiple sidepanels linked to multiple buttons on my page.

Basically, when I click one button one panel should open and when I click the second button, the first panel should close and second panel should be opened.

I have 9 such panels.

enter image description here

Currently using jQuery to achieve it also this is how I used the sidepanel https://codyhouse.co/demo/slide-in-panel/index.html

If anyone can help it would be great.

<div class="cd-panel from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
Content
</div>
</div>

jQuery(document).ready(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();
}
});
});


Button

<i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i"></i>

Bob Bob
Answer

By adding the other sidepanels classes to remove class $('.cd-panel-a').removeClass('is-visible');

jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn').on('click', function(event){
        event.preventDefault();
        $('.cd-panel').addClass('is-visible');
        $('.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');
            event.preventDefault();
        }
    });
});