Bob Bob - 1 month ago 6
Javascript Question

Sidepanels should close and open one after another

I have a page with multiple buttons on it and have multiple slides which opens when the buttons are clicked.

But they don't automatically close when another sidepanel open. I have to close all of them manually.

Could you please help.

Below is the code related to it.

HTML

<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">
</div>
</div>
<div class="cd-panel-mp from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
</div>
</div>
<div class="cd-panel-ha from-right">
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
</div>
</div>


HTML Buttons

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

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

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


CSS

.cd-main-content .cd-btn {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn:hover {
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}


//MP
.cd-main-content .cd-btn-mp {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-mp:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel-mp {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel-mp::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel-mp.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel-mp.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel-mp.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel-mp.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}


//HA
.cd-main-content .cd-btn-ha {
position: relative;
display: inline-block;
background-color: #89ba2c;
color: #000;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 5px rgba(0, 0, 0, 0.1);
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
transition: all 0.2s;
}
.no-touch .cd-main-content .cd-btn-ha:hover {
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 20px rgba(0, 0, 0, 0.3);
}
.cd-panel-ha {
position: fixed;
top: 0;
left: 0;
visibility: hidden;
-webkit-transition: visibility 0s 0.6s;
-moz-transition: visibility 0s 0.6s;
transition: visibility 0s 0.6s;
font-family: 'Open Sans', sans-serif;
z-index: 9;
}
.cd-panel-ha::after {
/* overlay layer */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent;
cursor: pointer;
-webkit-transition: background 0.3s 0.3s;
-moz-transition: background 0.3s 0.3s;
transition: background 0.3s 0.3s;
}
.cd-panel-ha.is-visible {
visibility: visible;
-webkit-transition: visibility 0s 0s;
-moz-transition: visibility 0s 0s;
transition: visibility 0s 0s;
}
.cd-panel-ha.is-visible::after {
background: rgba(0, 0, 0, 0.6);
-webkit-transition: background 0.3s 0s;
-moz-transition: background 0.3s 0s;
transition: background 0.3s 0s;
}
.cd-panel-ha.is-visible .cd-panel-close::before {
-webkit-animation: cd-close-1 0.6s 0.3s;
-moz-animation: cd-close-1 0.6s 0.3s;
animation: cd-close-1 0.6s 0.3s;
}
.cd-panel-ha.is-visible .cd-panel-close::after {
-webkit-animation: cd-close-2 0.6s 0.3s;
-moz-animation: cd-close-2 0.6s 0.3s;
animation: cd-close-2 0.6s 0.3s;
}


JQUERY

//NVV
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();
}
});
});

//MP
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn-mp').on('click', function(event){
event.preventDefault();
$('.cd-panel-mp').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel-mp').on('click', function(event){
if( $(event.target).is('.cd-panel-mp') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel-mp').removeClass('is-visible');
event.preventDefault();
}
});
});

//HA
jQuery(document).ready(function($){
//open the lateral panel
$('.cd-btn-ha').on('click', function(event){
event.preventDefault();
$('.cd-panel-ha').addClass('is-visible');
});
//close the lateral panel
$('.cd-panel-ha').on('click', function(event){
if( $(event.target).is('.cd-panel-ha') || $(event.target).is('.cd-panel-close') ) {
$('.cd-panel-ha').removeClass('is-visible');
event.preventDefault();
}
});
});

Bob Bob
Answer

I have achieved the solution by just adding the remove classes to each query and vice versa like below: It helped me

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


jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn-ab').on('click', function(event){
        event.preventDefault();
        $('.cd-panel-ab').addClass('is-visible');
$('.cd-panel-bc, .cd-panel').removeClass('is-visible');
    });
    //close the lateral panel
    $('.cd-panel-ab').on('click', function(event){
        if( $(event.target).is('.cd-panel-ab') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel-ab').removeClass('is-visible');
            event.preventDefault();
        }
    });
});


jQuery(document).ready(function($){
    //open the lateral panel
    $('.cd-btn-bc').on('click', function(event){
        event.preventDefault();
        $('.cd-panel-bc').addClass('is-visible');
$('.cd-panel, .cd-panel-ab').removeClass('is-visible');
    });
    //close the lateral panel
    $('.cd-panel-bc').on('click', function(event){
        if( $(event.target).is('.cd-panel-bc') || $(event.target).is('.cd-panel-close') ) { 
            $('.cd-panel-bc').removeClass('is-visible');
            event.preventDefault();
        }
    });
});
Comments