Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Aug 2011
    Location
    Mauritius
    Posts
    25
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Close one jquery panel when opening other one

    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

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    $( ".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:

    Code:
    container.removeClass("active");
    Hint: If you what to switch a class-name then you would use
    Code:
    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.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    If you want the class names to change only after the animation has completed, then use the callback:

    Code:
    container.slideUp(500, function () {
        // code here will run once the slideUp has completed
        $(this).removeClass("active");
    });
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •