Jquery, Open Close Slider Issue

Question

I have two sidebar (Slider), as per below image. When click on btn1 then side panel 1 open. when I click on btn2 side panel 2 open. This is Ok. Now when i click on btn1 and if side panel 2 is open, then its gonna close and side panel 1 open, its same for btn2 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 btn1 then it should be close. I try many things but it do not work for me.

HTML

    <div class="demo">
    <div class="demo-box">
      <div class="demo-buttons iconbar" > <img src="images/btn_overly.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow1"> <img src="images/btn_factfile.jpg" width="30" height="30" border="0" alt="" class = "sidemenushow2"> </div>
      <div class="demo-box-panel sidepanel1 " id="sidepanel1"  ><!-- style = "-webkit-overflow-scrolling: touch; overflow: scroll;" -->
    <div id="scroll" style="height: 100%;">
      <div>
        <div class = "btnclose sidemenuhide1"> <img src="images/close.png" width="26" height="26" border="0" alt=""> </div>
        <div class = "btnhead ">
          <h3>Title</h3>
        </div>
        <div class="pageContent">
          test
        </div>
      </div>
    </div>
      </div>
      <div class="demo-box-panel sidepanel2" id="sidepanel2">
       <div class = "btnclose sidemenuhide2"> <img src="images/close.png" width="26" height="26" border="0" alt=""> </div>
    <div id="" style = "height:100%;">
      <div> 
         test
      </div>
    </div>
      </div>
    </div>
  </div>

CSS

    /*@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 > 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;}

Jquery

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


        });

Answer 1

You can create a variable for each sidebar that indicate if it is open or close and update them on each action. Then every time you press one of those buttons, check if the pane is already open. If yes, close it. If not, open it.

Instead of a variable, you can also add a class to the sidebar when you open it and check for the presence of this class. You can do this via jQuery's .addClass() method.

Example:

In your javascript code, create the Variables (name them whatever suits you):

var isPanel1Open = false;
var isPanel2Open = false;

Then edit the functions that hide/show the panels:

$('.sidemenushow1').click(function(){

    $panel2.data('slidescrollpanel').hidePanel();
    isPanel2Open = false;

    if (isPanel1Open){
        $panel1.data('slidescrollpanel').hidePanel();
        isPanel1Open = false;
    } else {
        $panel1.data('slidescrollpanel').showPanel();
        isPanel1Open = true;
    }

});

$('.sidemenushow2').click(function(){
    $panel1.data('slidescrollpanel').hidePanel();
    isPanel1Open = false;

    if (isPanel2Open){
        $panel2.data('slidescrollpanel').hidePanel();
        isPanel2Open = false;
    } else {
        $panel2.data('slidescrollpanel').showPanel();
        isPanel2Open = true;
    }
});