title: JQuery - ToggleClass/AddClass/RemoveClass
body: <p>I have the following codes to create a top sliding admin panel, that will appear from the very top of the page. This sliding panel will be activated but clicking on the button "#tp-button2".</p>
  
  <p>However, I would like to add one more sliding panel and call it #toppanel2. </p>
  
  <p><strong>Behavior</strong></p>
  
  <p>tp-button2: when click, it will either show or hide toppanel, and if toppanel2 is "show", to slide it back into position before it slides out toppanel</p>
  
  <p>tp-button3: same behavior as above but for toppanel2</p>
  
  <p><strong>Current Situation</strong>: I'm using toggleClass which is easy for just 1 panel since it's to turn and off, but I'm not sure the algorithem to achieve the above, and i've tried long methods including addClass and removeClass and it's not working out because removeClass doesn't work.</p>
  
  <p><strong>This is what i'm using for single toggleClass</strong></p>
  
  <p><strong>Original CSS</strong></p>
  
  <pre><code>#tp-button2,tp-button3 {
  }
  .toppanel {
  height: 150px ;
  top:-150px; 
  background-color: #FFFFFF !important;
  position: '.$dimensionposition.' !important;
  }
  .toppanel2 {
  height: 75px ;
  top:-75px;
  background-color: #F1F1F1 !important;
  position: absolute !important;
  }
  
  .show {top:0px}
  .tp-relative {position: relative;padding-bottom: 150px;}
  .tp-relative2 {position: relative;padding-bottom: 75px;}
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>Original Javascript</strong>
      </p>
  
  <pre><code>var $j = jQuery.noConflict();
  
  $j(function() {
      $j( "#tp-button" ).click(function(){
      $j(".toppanel").toggleClass("show", 900, "easeOutBounce");
      $j("#tp-relativeblock").toggleClass("tp-relative", 900, "easeOutBounce");
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>I've attempted something like this</strong></p>
  
  <pre><code>var $j = jQuery.noConflict();
  
  
  $j(function() {
  
  
  $j("body").on("click", "#tp-button2", function(){
  
      if ($j("#toppanel").hasClass("show")) {
      alert("tp-button2 remove class");
      $j("#toppanel").removeClass("show", 900);
      $j("#tp-relativeblock").removeClass("tp-relative", 900);
  } else {
      alert("tp-button2 addClass");
      $j("#toppanel2").removeClass("show", 900).delay(900).queue($j("#tp-relativeblock").addClass("tp-relative", 900));
  
      $j("#tp-relativeblock").removeClass("tp-relative2", 900).delay(900).queue($j("#toppanel").addClass("show", 900));
  
  }
  
  });
  
  
  $j("body").on("click", "#tp-button3", function(){
  if ($j("#toppanel2").hasClass("show")) {
      alert("tp-button3 removeClass");
      $j("#toppanel2").removeClass("show", 900);
      $j("#tp-relativeblock").removeClass("tp-relative2", 900);
  
  } else {
      // Here i attempt to just bring down panel 2 without closing panel 1 to see whether there's code above that's wrong but it's not working too.
      alert("tp-button3 addClass");
      $j("#tp-relativeblock").addClass("tp-relative2", 900);
      $j("#toppanel2").addClass("show", 900)
  
  }
  
  });
  </code></pre>
  
  <p><strong>This is what i have on body</strong></p>
  
  <pre><code>&lt;div id="tp-button"&gt;&lt;i class="'.$iconstop.'"&gt;&lt;/i&gt;&lt;/div&gt;
  &lt;div id="toppanel" class="toppanel"&gt;
  &lt;div id="tp-container"&gt;
  &lt;div class="tp-s1"&gt;
  THIS IS PANEL 1 COLUMN 1
  &lt;/div&gt;
  &lt;div class="tp-s2"&gt;
  THIS IS PANEL 1 COLUMN 2
  &lt;/div&gt;
  &lt;div class="tp-s3"&gt;
  THIS IS PANEL 1 COLUMN 3
  &lt;/div&gt;
  &lt;div class="tp-s4"&gt;
  THIS IS PANEL 1 COLUMN 3        
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="toppanel2" class="toppanel2"&gt;
  &lt;div id="tp-container"&gt;
  &lt;div class="tp-s1"&gt;
  PANEL 2
  &lt;/div&gt;
  &lt;div class="tp-s2"&gt;
  PANEL 2
  &lt;/div&gt;
  &lt;div class="tp-s3"&gt;
  PANEL 2
  &lt;/div&gt;
  &lt;div class="tp-s4"&gt;
  PANEL 2
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="tp-relativeblock"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I understand addClass and removeClass and what it does but sometimes removeClass doesn't remove tp-relative from tp-relativeblock so it doesn't move back up to space.
  Click Button2:</p>
  
  <p>toppanel slide down <strong>Success</strong></p>
  
  <p>relativeblock slidedown <strong>Success</strong></p>
  
  <p>Second Button 2 Click:</p>
  
  <p>toppanel slides up to 0px <strong>Success</strong></p>
  
  <p>remove tp-relative from #tp-relativeblock <strong>failed</strong></p>
  
  <p>Click button3:</p>
  
  <p>Nothing Happens</p>
  
  <p>Button2 also became disabled</p>
  
  <p>Amature here to javascript and jquery, so will appreciate all help i can to achieve this.</p>
  
  <p>My objective is for panel 1 to show "Login TO Website" and panel 2 to show "Register To Website"</p>
  
  <p><strong>THANK YOU IN ADVANCED!!</strong></p>