Here’s a simple tutorial on how to show and hide the div content based on the click event using jQuery.
Click on the below “item” link to display the content and click again to hide.
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
In the above code, I have used the jQuery “toggle()” function to display or hide the matched elements. Learn more about this function here.