Show/Hide Multiple Divs with Jquery

by 
jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

http://jsfiddle.net/XwN2L/

More Related Contents:

  1. How to change the element of another div by clicking and hovering on an element of a different div
  2. Hide/Show div on specific page with jquery
  3. use jQuery’s find() on JSON object
  4. Get an element by index in jQuery
  5. How do I make jQuery Contains case insensitive, including jQuery 1.8+?
  6. Create a CSS rule / class with jQuery at runtime
  7. Custom events in jQuery?
  8. jQuery find closest previous sibling with class
  9. jQuery.animate() with css class only, without explicit styles
  10. How can I keep Bootstrap popovers alive while being hovered?
  11. jqGrid data stored in browser cache?
  12. jqGrid does not populate with data
  13. How to get only direct text without tags with jQuery in HTML
  14. Efficient, concise way to find next matching sibling?
  15. Set Focus After Last Character in Text Box
  16. How to get the position of a draggable object
  17. jQuery stopPropagation bubble down
  18. How to create a direct link to any fancybox box
  19. Setting min date in jQuery datepicker
  20. jquery array group by
  21. How to cancel navigation when user clicks a link ( element)?
  22. Capture 404 status with jQuery AJAX
  23. JQuery, Flot, valuelabels, center
  24. Remove CSS “top” and “left” attributes with jQuery
  25. jQuery validator and datepicker click not validating
  26. Re-attaching jQuery detach();
  27. jquery validation not waiting for remote validation to return true, considers form valid
  28. Selecting a jQuery Tab using a parameter in the URL
  29. Using jQuery’s $.ajax within an angularJS controller
  30. In-cell data bars in jqGrid – possible or not?

Leave a Comment