jquery show hide multiple div onclick example

Today, We want to share with you jquery show hide multiple div onclick example.In this post we will show you onclick show / hide multiple div jquery demo, hear for Hide and show multiple div with a single button click ? we will give you demo and example for implement.In this post, we will learn about onclick show hide div jquery demo with an example.

Read Also:  Automatically Refresh HTML page after some interval

jQuery show / hide multiple divs

Example 1: index.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function() {
  jQuery('#showall').click(function() {
    jQuery('.targetDiv').show();
  });
  jQuery('.showSingle').click(function() {
    jQuery('.targetDiv').hide();
    jQuery('#div' + $(this).attr('target')).show();
  });
});
</script>
</head>
<body>


<div class="buttons">
  <a id="showall">All</a>
  <a class="showSingle" target="1" rel="noopener">Div 1</a>
  <a class="showSingle" target="2" rel="noopener">Div 2</a>
  <a class="showSingle" target="3" rel="noopener">Div 3</a>
  <a class="showSingle" target="4" rel="noopener">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>

</body>
</html>

I hope you get an idea about onclick show/hide div jquery demo.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.