Reputation: 477
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();
}
});
});
Upvotes: 0
Views: 71
Reputation: 477
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();
}
});
});
Upvotes: 0
Reputation: 44118
//NVV
$(document).ready(function() {
//open the lateral panel
$('.cd-btn').on('click', function(event) {
var tgr = $(this).data('id');
var tgt = $('.cd-main-content').find('#' + tgr);
event.preventDefault();
$('.cd-panel').removeClass('is-visible');
tgt.addClass('is-visible');
$('.cd-panel-close').on('click', function(event) {
$('.cd-panel').removeClass('is-visible');
});
});
});
.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 {
cursor: pointer;
-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;
}
.control {
margin: 200px 0 0 50px;
}
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class='no-touch'>
<main class="cd-main-content row">
<div class="cd-panel from-right col-4-md" id='nvv-i'>
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
CONTENT NVV __ __
</div>
</div>
<div class="cd-panel from-right col-4-md" id='mp-i'>
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
CONTENT ___ MP __
</div>
</div>
<div class="cd-panel from-right col-4-md" id='ha-i'>
<header class="cd-panel-header">
<a href="#0" class="cd-panel-close">Close</a>
</header>
<div class="cd-panel-container">
CONTENT ___ __ HA
</div>
</div>
<fieldset class="control btn-group">
<i class="glyphicon glyphicon-plus-sign cd-btn btn" data-id="nvv-i"></i>
<i class="glyphicon glyphicon-plus-sign cd-btn btn" data-id="mp-i"></i>
<i class="glyphicon glyphicon-plus-sign cd-btn btn" data-id="ha-i"></i>
</fieldset>
</main>
</div>
Upvotes: 1
Reputation: 381
Try this
var panels = [document.querySelector(".cd-panel"), document.querySelector(".cd-panel-mp"), document.querySelector(".cd-panel-ha")];
var btns = [document.querySelector(".cd-btn"), document.querySelector(".cd-btn-mp"), document.querySelector(".cd-btn-ha")];
function openPanel(x) {
x.classList.add("is-visible")
}
function closePanel(x) {
return x.classList.remove("is-visible");
}
function panelClick(x) {
for (var i = 0; i < 3; i++){
if(x === panels[i]) continue;
event.preventDefault();
closePanel(panels[i]);
}
}
function btOpen(x) {
var index = [].indexOf.call(btns, x);
for (var i = 0; i < 3; i++) {
if (i === index) openPanel(panels[i]); else closePanel(panels[i]);
}
}
panels.forEach(function (x) { x.onclick = function () { panelClick(this) }});
btns.forEach(function (x) { x.onclick = function () { btOpen(this) } })
//This should work. I tried it and it works. I am not familiar with jQuery, that is why do not see any jQuery script. However, you can replace the script with jQuery script.
//If you do not understand a script above, tell it in a comment, so i wil help you understand the code. Hope it helps
Upvotes: 1