title: Jquery, Open Close Slider Issue
body: <p>I have two sidebar (Slider), as per below image.
  When click on <strong>btn1</strong> then side panel 1 open. when I click on <strong>btn2</strong> side panel 2 open. This is Ok. Now  when i click on <strong>btn1</strong> and if side panel 2 is open, then its gonna close and side panel 1 open, its same for <strong>btn2</strong> for side panel 1. this is also Ok and work fine. Now I do not wish to add close btn. so i decided that if side panel 1 open and i click on <strong>btn1</strong> then it should be close. I try many things but it do not work for me.</p>
  
  <p><img src="https://i.stack.imgur.com/QD6V3.png" alt="enter image description here"></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div class="demo"&gt;
      &lt;div class="demo-box"&gt;
        &lt;div class="demo-buttons iconbar" &gt; &lt;img src="images/btn_overly.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow1"&gt; &lt;img src="images/btn_factfile.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow2"&gt; &lt;/div&gt;
        &lt;div class="demo-box-panel sidepanel1 " id="sidepanel1"  &gt;&lt;!-- style = "-webkit-overflow-scrolling: touch; overflow: scroll;" --&gt;
      &lt;div id="scroll" style="height: 100%;"&gt;
        &lt;div&gt;
          &lt;div class = "btnclose sidemenuhide1"&gt; &lt;img src="images/close.png" width="26" height="26" border="0" alt=""&gt; &lt;/div&gt;
          &lt;div class = "btnhead "&gt;
            &lt;h3&gt;Title&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="pageContent"&gt;
            test
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="demo-box-panel sidepanel2" id="sidepanel2"&gt;
         &lt;div class = "btnclose sidemenuhide2"&gt; &lt;img src="images/close.png" width="26" height="26" border="0" alt=""&gt; &lt;/div&gt;
      &lt;div id="" style = "height:100%;"&gt;
        &lt;div&gt; 
           test
        &lt;/div&gt;
      &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>    /*@import url("../vendor/yui-cssreset.css");
  @import url("./generic.css");*/
  .demo a{cursor:pointer;color:white;display:block;}
  /*.demo a:hover{text-decoration:underline}*/
  .demo .demo-box{width:250px;height:700px;position:absolute;margin:0;padding:0;text-align:center; right:-1px; top:5px;}
  .demo .demo-box .slidescrollpanel-wrap{ }
  .demo .demo-box .slidescrollpanel-content{text-align:left;border:1px solid #000;background:#313831;position:relative;}
  .demo .demo-box .slidescrollpanel-content pre &gt; code{}
  .demo .demo-box .demo-buttons{margin-top:25px; height:100%}
  .demo .demo-box .demo-buttons button{margin:.5em;width:150px;max-width:40%}
  .navtitle{cursor:pointer;color:white;display:block;height:30px;}
  </code></pre>
  
  <p><strong>Jquery</strong></p>
  
  <pre><code>$(function(){
              var $panel1 = $('.sidepanel1').slideScrollPanel({
                  direction: 'right'
              });
              $('.sidemenushow1').click(function(){
                  $panel2.data('slidescrollpanel').hidePanel();
                  $panel1.data('slidescrollpanel').showPanel();
              });
              $('.sidemenuhide1').click(function(){
                  $panel1.data('slidescrollpanel').hidePanel();
              });
  
  
              var $panel2 = $('.sidepanel2').slideScrollPanel({
                  direction: 'right'
              });
              $('.sidemenushow2').click(function(){
                  $panel1.data('slidescrollpanel').hidePanel();
                  $panel2.data('slidescrollpanel').showPanel();
              });
              $('.sidemenuhide2').click(function(){
                  $panel2.data('slidescrollpanel').hidePanel();
              });
  
  
          });
  </code></pre>