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.
Item
Content
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.
Item1
Content1
Item2
Content2
Item3
Content3
HTML for above example
lang="html"]
Item1
Content1
Item2
Content2
Item3
Content3
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.