How to hide any opened lists when click on any part of document other than the current list item div?

Question

I have the following code -

HTML -

<div id="new_results">
    <div class="new_result">
        <div class="new_result_header"><h3>Acura ILX</h3></div>
        <div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
            <ul class="new_trim_values">
            <li>4dr Sedan (2.0L 4cyl 5A) </li>
            <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
            <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
    <div class="new_result">
        <div class="new_result_header"><h3>Acura ILX Hybrid</h3></div>
        <div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
            <ul class="new_trim_values">
            <li>4dr Sedan (2.0L 4cyl 5A) </li>
            <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
            <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
    <div class="new_result">
        <div class="new_result_header"><h3>Acura MDX</h3></div>
        <div class="new_trim_dropdown"><p>Available Trims - <span>3</span></p>
            <ul class="new_trim_values">
            <li>4dr Sedan (2.0L 4cyl 5A) </li>
            <li>4dr Sedan w/Premium Package (2.4L 4cyl 6M)</li>
            <li>44dr Sedan w/Premium Package (2.0L 4cyl 5A)</li>
            </ul>
        </div>
    </div>
</div>

CSS -

.new_result
{
    border:1px solid red;
    margin-bottom:25px;
}
#new_results .new_trim_values
{
    display:none;
}

jQuery -

<script type="text/javascript">
$(document).on("click", ".new_trim_dropdown", function(event){
    if($(event.target).is($(this).children()))
    {
        $(this).children('.new_trim_values').toggle();
        $(this).parents(".new_result").siblings(".new_result").find('.new_trim_values').hide();
    }

});
</script>

Now at start all list items are hidden. When i click on "Available Trims - 3" then its corresponding list items will be toggled i.e. show and hide effect. Along with it, any other opened list items will be hidden if they are already opened. But i also want to hide any opened list items when we click off it i.e. if we click any part of document except the currently opened list div. How to do that? Demo is at -

DEMO

possible duplicate of [Close a div by clicking outside](http://stackoverflow.com/questions/17965839/close-a-div-by-clicking-outside) — A. Wolff, May 02 '14 at 10:04

score 1 · Accepted Answer · answered May 02 '14 at 10:03

1

You can use:

$(document).on('click',function() {
    $('.new_trim_values').hide();        
});

as well as using event.stopPropagation() to prevent event bubble up from .new_trim_dropdown to the document level which will hide it again:

$(document).on("click", ".new_trim_dropdown", function(event){
    event.stopPropagation();
    // Rest of your code here
});

Updated Fiddle

answered May 02 '14 at 10:03

Felix

37,892
8
43
55

Thanks. That worked very well. I just needed to stop bubbling in DOM. – Sachin May 02 '14 at 11:48

score 1 · Answer 2 · answered May 02 '14 at 10:04

You need to add a click handler to the document to hide the divs. Try this:

$(document).click(function() {
    $('.new_trim_values').hide();
});

Example fiddle

You may also need to add event.stopPropagation() to the click handler which toggles the divs, depending on the behaviour you want.

Finally, you can simplify your code. You don't need to check the event target is a child of the selector as events bubble up the DOM. Try this:

$(document).on("click", ".new_trim_dropdown", function (event) {
    event.stopPropagation();
    $('.new_trim_values').hide();
    $(this).find('.new_trim_values').toggle();
});

$(document).click(function() {
    $('.new_trim_values').hide();
});

Updated fiddle

score 1 · Answer 3 · answered May 02 '14 at 10:06

Try this

$(document).on("click", ".new_trim_dropdown", function(event){
    event.stopPropagation();
    if($(event.target).is($(this).children()))
    {
        $(this).children('.new_trim_values').toggle();
        $(this).parents(".new_result").siblings(".new_result").find('.new_trim_values').hide();
    }

});

$(document).on("click", function(event){

      $(this).find('.new_trim_values').hide();

});

Fiddle

score 0 · Answer 4 · answered May 02 '14 at 10:03

0

You could use this:

$(document).find(":not('.yourSelector')")

answered May 02 '14 at 10:03

Matas Vaitkevicius

58,075
31
238
265

How to hide any opened lists when click on any part of document other than the current list item div?

4 Answers4