CODEWITHSUNDEEP
jquery
user1355300
user1355300

Reputation: 4987

Hide everything else and only show one div

There are multiple items in a div. Each item has a button and info div. When clicking on title in any div, I want to slide up or fade out everything, want to display only the info of that div in kind of lightbox style.

Here's what I'm trying and it does not work. It slides up everything on click, but does not show the info.

HTML:

<div class="wrap">
    <div class="inner">

        <div class="box">
            <div class="button"></div>
            <div class="info">Info for box 1</div>
        </div>

        <div class="box">
            <div class="button"></div>
            <div class="info">Info for box 2</div>
        </div>

    </div>
</div>

CSS:

.wrap{
    width: 500px;
    background: yellow;
    padding: 20px;
}

.box{
    margin-bottom: 20px;    
}

.info{
    display: none;
}

.button{
    width: 20px;
    height: 20px;
    background: green;
}

jQuery:

$('.wrap').on('click','.button',function(){

    $('.inner').slideUp(400);
    $(this).closest('.info').slideDown(400);

});

Demo: http://jsfiddle.net/a7wwz/

Upvotes: 0

Views: 232

Answers (3)

Balint Bako
Balint Bako

Reputation: 2560

How about this:

$('.wrap').on('click', '.button', function () {
   $('.inner *').not($(this).parent()).slideUp(400);  
   $(this).next().slideDown(400);  
});

FIDDLE

Upvotes: 0

Carsten Massmann
Carsten Massmann

Reputation: 28196

Or try this

$('.wrap').on('click','.button',function(){
    $('.inner>div>div').slideUp(400);
    $(this).next('.info').slideDown(400);
});

http://jsfiddle.net/a7wwz/4/

Your original version did not work because you use .slideup() on a container whose element you want to have visible afterwards. In my version I simply slideup only the divs of the lowest level inside the container .inner.

And, of course, closest() looks upwards for the closest parent. What you really meant was next().

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$('.wrap').on('click','.button',function(){

    var $info = $(this).next('.info').stop(true, true).slideDown(400);
    $('.info').not($info).stop(true, true).slideUp();

});

Demo: Fiddle

Upvotes: 0

Related Questions