title: multiple sidepanels transition javascript
body: <p>I have multiple sidepanels linked to multiple buttons on my page.</p>
  
  <p>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.</p>
  
  <p>I have 9 such panels.</p>
  
  <p><img src="https://i.stack.imgur.com/7X8Dq.png" alt="enter image description here"></p>
  
  <p>Currently using jQuery to achieve it also this is how I used the sidepanel <a href="https://codyhouse.co/demo/slide-in-panel/index.html" rel="nofollow">https://codyhouse.co/demo/slide-in-panel/index.html</a></p>
  
  <p>If anyone can help it would be great.</p>
  
  <pre><code> &lt;div class="cd-panel from-right"&gt; 
                  &lt;header class="cd-panel-header"&gt;
                      &lt;a href="#0" class="cd-panel-close"&gt;Close&lt;/a&gt;
                  &lt;/header&gt;
                  &lt;div class="cd-panel-container"&gt;
  Content
          &lt;/div&gt;
      &lt;/div&gt;
  
  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();
          }
      });
  });
  </code></pre>
  
  <p>Button</p>
  
  <pre><code>&lt;i class="glyphicon glyphicon-plus-sign cd-btn" id="nvv-i"&gt;&lt;/i&gt;
  </code></pre>