Question

html code:

<div id="all"> </div>
<div id="div1"> </div>
<div id="div2"> </div>
<div id="div3"> </div>
<div id="div4"> </div>
<div id="div5"> </div>

jquery code:

This works for swithcing between “div1” and “all”. What if I wanted to click on #div1 and show only “all” and hide the others and when clicked on “all”, show all the divs.

    $(function () {
         $("#div1, #all").on('click', function () 
         {
             $("#div1, #all").not(this).show();
             $(this).hide(); 
         });
     });

Answer 1

Try below approach using class.

HTML:

<div id="all"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>
<div class="myDivs"> </div>

JS:

$(function () {
    $('.myDivs').click (function () {
        $('.myDivs').not(this).hide();
    });

    $('#all').click (function () {
        $('.myDivs').show();
    });
});

Edit: Improvised with 2 handlers

DEMO: http://jsfiddle.net/Fsg9y/2/