Question

I have 4 equally spaced boxes in a page. I want to be able to click on one and it expand to fit in the area of 2, while hiding the one to the right. The code below allows me to click on .box1 and expand box1 / hide box2 to fill 2 box spaces. The problem is, when I click box1 to close to original size it does not put box2 back like it should. Here is the code so far:

$(function() {


    $( ".box1" ).click(function() {
    $( ".box1" ).switchClass( "box1", "box1_l", 200 );
    $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );
    $(".box2").hide();

        return false;
    });

$(function() {

    $( ".box1_l" ).click(function() {
    $( ".box2").show();
        return false;
    });

});

thank you in advance 🙂

RESOLVED THANKS TO CYBERNATE:

$(function() {
$( ".box1" ).click(function() {
    var $box2 = $(".box2");
    if($box2.is(":visible")){
        $( ".box1" ).switchClass( "box1", "box1_l", 200 );
        $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );
        $(".box2").hide();
        return false;
    } else{
    $( ".box2").show();
     $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );

 return false;
    }
}); 

});

Answer 1

Try this:

$(function() {
    $( ".box1" ).click(function() {
        var $box2 = $(".box2");
        if($box2.is(":visible")){
            $( ".box1" ).switchClass( "box1", "box1_l", 200 );
            $( ".box1_l" ).switchClass( "box1_l", "box1", 200 );
            $(".box2").hide();
            return false;
        } else{
             //Not sure if you need the two commented lines below.   
         //$( ".box1" ).switchClass( "box1_l", "box1", 200 );
         //$( ".box1_l" ).switchClass( "box1", "box1_l", 200 );
         $( ".box2").show();
     return false;
        }
    }); 
});