Toggle Visibility & Target Div Classes

Sourced here, and also has a great JSFiddle to demonstrate the functionality:

<div class="buttons">

<a  id="showall">All</a>

<a  class="showSingle" target="1">Div 1</a>

<a  class="showSingle" target="2">Div 2</a>

<a  class="showSingle" target="3">Div 3</a>

<a  class="showSingle" target="4">Div 4</a>

</div>



<div id="div1" class="targetDiv">Lorum Ipsum1</div>

<div id="div2" class="targetDiv">Lorum Ipsum2</div>

<div id="div3" class="targetDiv">Lorum Ipsum3</div>

<div id="div4" class="targetDiv">Lorum Ipsum4</div>
jQuery(function(){

         jQuery('#showall').click(function(){

               jQuery('.targetDiv').show();

        });

        jQuery('.showSingle').click(function(){

              jQuery('.targetDiv').hide();

              jQuery('#div'+jQuery(this).attr('target')).show();

        });

});

It’s simple to modify this code to not include a Show All option by hiding the main class with CSS, and triggering the first click event onload with jQuery.

Leave a Reply

katherine as a flat graphic icon

About Me

I’m an African / Ojibwe First Nations Web Developer living in Winnipeg, Manitoba.

Visit the Tips and Blog to see what I’m working on.