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.

Item

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

Item1

Item2

Item3

HTML for above example

 lang="html"]

Item1
Item2
Item3

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.


Leave a Reply

Your email address will not be published. Required fields are marked *

Bitnami