Close one jquery panel when opening other one

[nadazoulou]

Hi I have 2 panels on my page ... if I click on one panel if the other is opened it close it before opening other one and vice versa..byt unfortunately the active classes are not cahnging accordingly.

This is my code:
jQuery(function( $ ){
// Get a reference to the container.
var container = $( "#panel" );
var containermap = $( "#map" );
// Bind the link to toggle the slide.
$( ".btn-slide" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp( 500 );
$(this).removeClass("active");

} else {

// Show - slide down.
container.slideDown( 500 );
$(this).addClass("active");
}

if (containermap.is( ":visible" )) {
//alert('test');
containermap.slideUp( 500 );
$(this).removeClass("active-map");

container.slideDown( 500 );
$(this).addClass("active");

}

}
);

$( ".btn-map" ).click(
function( event ){
event.preventDefault();
if (containermap.is( ":visible" )){
containermap.slideUp( 500 );
$(this).removeClass("active-map");


} else {
containermap.slideDown( 500 );
$(this).addClass("active-map");
}


if (container.is( ":visible" )) {
container.slideUp( 500 );
$(this).removeClass("active-map");

containermap.slideDown( 500 );
$(this).addClass("active-map");

}

}
);


});


Please have a look...I want when the panel is closing it reove the active classes...but it doesn't seem to work.Any help please.Urgent

Thnak you

//Sam

[AndrewGSW]

$( ".btn-slide" ).click(
function( event ){
// Prevent the default event.
event.preventDefault();
// Toggle the slide based on its current
// visibility.
if (container.is( ":visible" )){
// Hide - slide up.
container.slideUp( 500 );
$(this).removeClass("active");

Within this click event $(this) refers to the element(s) $(".btn-slide"). Is this what you intend? If you want to change the class of the container element then use:

container.removeClass("active");

Hint: If you what to switch a class-name then you would use

element.removeClass("something").addClass("something-else");

Please wrap your code in [CODE] [/ CODE] tags (without the spaces) and use proper indenting, as it is very difficult to read the code otherwise.

[AndrewGSW]

If you want the class names to change only after the animation has completed, then use the callback:

container.slideUp(500, function () {
    // code here will run once the slideUp has completed
    $(this).removeClass("active");
});