CODEWITHSUNDEEP
javascriptjquery
Crisan Raluca Teodora
Crisan Raluca Teodora

Reputation: 1293

JQuery hides all element besides current element

I have 4 blocks and whenever I press on one of them, a checkbox appears inside it. If I click on another block the current checkbox will disappear and the other checkbox will appear which is good. The problem is that if I click on one block and the checkbox appears, when I press on that checkbox the block will disappear and it shouldn't.

I have the following html code:

<div class="item">1 <input class="hidden" type="checkbox"></div>
<div class="item">2 <input class="hidden" type="checkbox"></div>
<div class="item">3 <input class="hidden" type="checkbox"></div>
<div class="item">4 <input class="hidden" type="checkbox"></div>

the following css code:

.hidden {
    display: none;
}

and the javascript code:

$(".item").click(function(){     
    $(".item").find('input').hide();                    
    $(this).find('input').show('fast');
});

What can I do in order to hide all the checkboxes that are visible besides the current one (the block I clicked on)?

Upvotes: 0

Views: 284

Answers (2)

Lee
Lee

Reputation: 10603

use the .not() filter like so

$(".item").click(function(){     
    $(".item").not(this).find('input').hide();                    
});

Edit:

You may want to consider if a user wants to change their mind, and re-enable all options. You can do that like so:

$(".item").click(function(){     
    var items = $(".item").not(this).find('input');
    if($('input',this).is(':checked')) items.hide();
    else items.show();                
});

http://jsfiddle.net/r8yBd/

Upvotes: 5

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57105

Try

$(".item").click(function(){     
    $(".item").find('input').addClass('hidden');                    
    $(this).find('input').removeClass('hidden');
});

Upvotes: 1

Related Questions