Toggle close / open div on double click or click outside

Question

I have few div which is collapsed. On click of div of each element it display the collapsed content. On second click only on the same div it toggle class 'is-collapsed' and hide the element content. What i need to do is to be able to close displayed content also when i click on one of the other div or somewhere outside.

Not sure about the exact java script but take the part that is working for the toggle class.

This is the code :

 /* collapse */ $('.filter-collapse .box-heading').live('click', function() { $(this).closest('.box').toggleClass('is-collapsed'); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filters-collapse"> <div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed"> <div class="box-heading">Sizes</div> <div class="box-content"> <ul class=""> <li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li> <li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li> </ul> </div> </div> <div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed"> <div class="box-heading">Color</div> <div class="box-content"> <ul class=""> <li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li> <li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li> <li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li> </ul> </div> </div> </div> 

Answer 1

I suggest to use another event handler on the document, which adds the is-collapsed class to all collapsable elements - ignoring the box itself, if one was clicked.

 /* collapse */ $(document).on("click", function(e) { // add collapsed to all boxes, besides a box itself was clicked. var currentTargetBox = $(e.target).closest('.filters-collapse .box'); $('.filters-collapse .box').not(currentTargetBox).addClass('is-collapsed'); }); $(document).on("click", '.filters-collapse .box-heading', function(e) { // toggle is-collapsed $(this).closest('.box').toggleClass('is-collapsed'); }); 

 .box.is-collapsed .box-content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filters-collapse"> <div class="box sf-option sf-list sf-option-13 sf-multi is-collapsed"> <div class="box-heading">Sizes</div> <div class="box-content"> <ul class=""> <li><label><input type="checkbox" name="option[13]" value="49"><span class="sf-name">S (2)</span> </label></li> <li><label><input type="checkbox" name="option[13]" value="50"><span class="sf-name">M (1)</span> </label></li> </ul> </div> </div> <div class="box sf-option sf-list sf-option-14 sf-multi is-collapsed"> <div class="box-heading">Color</div> <div class="box-content"> <ul class=""> <li><label><input type="checkbox" name="option[14]" value="55"><span class="sf-name">White (2)</span> </label></li> <li><label><input type="checkbox" name="option[14]" value="54"><span class="sf-name">Red (1)</span> </label></li> <li><label><input type="checkbox" name="option[14]" value="53"><span class="sf-name">Black (1)</span> </label></li> </ul> </div> </div> </div>