jQuery Show and Hide Div Element

Here’s a simple tutorial on how to show and hide the div content based on the click event using jQuery.

Example1:

Click on the below “item” link to display the content and click again to hide.

Example2:

This example shows multiple links and content. Click on “item1” to show and hide the content related to this link and so on. “Open All” link will show all the hidden content and “Close All” link will collapse all the content.

Open All | Close All

HTML for above example

 lang="html"]

  Open All | 
  Close All


  Item1
  
Content1


  Item2
  
Content2


  Item3
  
Content3

jQuery Code

In the above code, I have used the jQuery “toggle()” function to display or hide the matched elements. Learn more about this function here.