Show/Hide Divs in jQuery

Question

I have this JSFiddle for reference: http://jsfiddle.net/422MP/38/

The green boxes are floating right, therefore I only want them to show when its parent div is expanded. If another div is clicked, I want the previous div's green box to hide and the new div's to show. Any ideas on this? Here is the js:

$('.sidebar').on('click', function() {
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50)
        $(this).animate({width: 150}, 400);
    else
        $(this).animate({width: 50}, 400);
});

Answer 1

Try to position it using absolute position

.inner {
    width: 50px;
    height: 50px;
    background-color: green;
    position: absolute;
    left: 100px;
}
.sidebar {
    height: 300px;
    width: 50px;
    display: inline-block;
    position: relative;
    overflow: hidden;
    /* left: 565px;*/
    /*position: relative;i*/
    margin:0 0px 0 10px;
}

Demo: Fiddle

Answer 2

Please try this

$('.inner').hide();
$('.sidebar').on('click', function() {
    $('.inner').hide();
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50){
        $(this).animate({width: 150}, 400);
        $(this).find('.inner').show();
    }
    else{
        $(this).animate({width: 50}, 400);
    }
});

Please see the fiddle

Answer 3

Why not add display: none for the inner class definition and then do something like this with the jQuery:

$('.sidebar').on('click', function() {
    //$('.sidebar').animate({width: 50}, 400);
    if ($(this).width() == 50)
        $(this).animate({width: 150}, 400).children(".inner").show();
    else
        $(this).animate({width: 50}, 400).children(".inner").hide();
});

jsFiddle

Answer 4

css:

.inner{display:none;}

javascript:

$('.sidebar').on('click', function() {
    $('.sidebar').not(this).animate({width: 50}, 400);
    if ($(this).width() == 50){
        $(this).animate({width: 150}, 400);
        $(".inner").fadeOut();
        $(this).children(".inner").fadeIn();
    }
    else{   
        $(this).animate({width: 50}, 400);
        $(".inner").hide();
    }        
});

Answer 5

First hide all the inner divs and show the child inner of current sidebar

Add twol lines of code with your js

$('.sidebar').on('click', function() {

$(".inner").hide(); $(this).children('.inner').show();

$('.sidebar').not(this).animate({width: 50}, 400);
if ($(this).width() == 50)
    $(this).animate({width: 150}, 400);
else
    $(this).animate({width: 50}, 400);

});