CODEWITHSUNDEEP
javascriptjquerycss
Bob
Bob

Reputation: 477

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

Upvotes: 0

Views: 71

Answers (3)

Bob
Bob

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

zer00ne
zer00ne

Reputation: 44118

Changes

  • Added id to each panel
  • Added data-id to each button
  • Condensed the jQuery down to one two functions (just remembered the close button)
  • If a button is clicked
    • All open panels will close
    • The button's data-id will be matched to the id of one of the panels.
    • That particular panel will open
  • Added Bootstrap in order to see buttons better.

SNIPPET

//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

youssouf
youssouf

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

Related Questions