JQuery - ToggleClass/AddClass/RemoveClass

Question

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".

However, I would like to add one more sliding panel and call it #toppanel2.

Behavior

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

tp-button3: same behavior as above but for toppanel2

Current Situation: 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.

This is what i'm using for single toggleClass

Original CSS

#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;}
</style>

Original Javascript

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");
    });
});
</script>

I've attempted something like this

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)

}

});

This is what i have on body

<div id="tp-button"><i class="'.$iconstop.'"></i></div>
<div id="toppanel" class="toppanel">
<div id="tp-container">
<div class="tp-s1">
THIS IS PANEL 1 COLUMN 1
</div>
<div class="tp-s2">
THIS IS PANEL 1 COLUMN 2
</div>
<div class="tp-s3">
THIS IS PANEL 1 COLUMN 3
</div>
<div class="tp-s4">
THIS IS PANEL 1 COLUMN 3        
</div>
</div>
</div>

<div id="toppanel2" class="toppanel2">
<div id="tp-container">
<div class="tp-s1">
PANEL 2
</div>
<div class="tp-s2">
PANEL 2
</div>
<div class="tp-s3">
PANEL 2
</div>
<div class="tp-s4">
PANEL 2
</div>
</div>
</div>
<div id="tp-relativeblock"></div>

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:

toppanel slide down Success

relativeblock slidedown Success

Second Button 2 Click:

toppanel slides up to 0px Success

remove tp-relative from #tp-relativeblock failed

Click button3:

Nothing Happens

Button2 also became disabled

Amature here to javascript and jquery, so will appreciate all help i can to achieve this.

My objective is for panel 1 to show "Login TO Website" and panel 2 to show "Register To Website"

THANK YOU IN ADVANCED!!

Answer 1

This is the jQuery I use to add and remove classes

To add:

$("#some-id").toggleClass('class-name', 'add');

To Remove:

$("#some-id").toggleClass('class-name', 'remove');

In this fiddle toggleClass is used to trigger css animations