function contentGroup($controllers, $contentEls, doEach) { // http://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5 $controllers.on( "click", function(event) { event.preventDefault(); // Saving "$(this)" to variable for when we go into a different scope. var $target = $(this); if (doEach) { // Using an .each() loop to show or hide. $contentEls.each(function( index ) { var $item = $(this); if ( $item.data('content') === $target.data('content') ) { // Open this one. $item.show(); } else { // Close this one. $item.hide(); } }); } else { // Using jQuery selectors to decide which ones to show or hide. var $content = $contentEls.filter("[data-content='" + $target.data('content') + "']"); $contentEls.not($content).hide(); $content.show(); } }); } contentGroup( $('.myController'), $('.myContent'), false ); contentGroup( $('.myController2'), $('.myContent2'), true );
<p> This set will show or hide using an .each() loop. </p> <nav> <a href="#" class="myController" data-content="stuff">Stuff</a> <a href="#" class="myController" data-content="things">Things</a> <a href="#" class="myController" data-content="doodads">Doodads</a> <a href="#" class="myController" data-content="dinglehoppers">Dinglehoppers</a> </nav> <div class="myContent" data-content="stuff">This is some stuff.</div> <div class="myContent" data-content="things">Here are some things.</div> <div class="myContent" data-content="doodads">Look at these doodads.</div> <div class="myContent" data-content="dinglehoppers">Here is a dinglehopper.</div> <hr> <p> This set will show or hide using jQuery selectors. </p> <nav> <a href="#" class="myController2" data-content="stuff">Stuff</a> <a href="#" class="myController2" data-content="things">Things</a> <a href="#" class="myController2" data-content="doodads">Doodads</a> <a href="#" class="myController2" data-content="dinglehoppers">Dinglehoppers</a> </nav> <div class="myContent2" data-content="stuff">This is some stuff.</div> <div class="myContent2" data-content="things">Here are some things.</div> <div class="myContent2" data-content="doodads">Look at these doodads.</div> <div class="myContent2" data-content="dinglehoppers">Here is a dinglehopper.
div { display:none; }