How to show hide div using jquery

To hide, show or toggle a div in jquery is very easy as compared to the traditional ways in javascript;where we get the element by Id or name and use the css to show hide those elements.

Lets see some sample codes on How to show hide div using jquery.

A) Using show() and hide() functions

1. Create a HTML page

2. Add jquery functions
You can either add in the HTML or create a new js file.

The Output will look like the below screenshot. When you click the Show Div button, the div will be displayed. When you click on Hide Div button, the div will be hidden.

How to Show Hide Div in JQuery

B) Using toggle() function

To make things more easy, jquery provide a toggle function, which can be used to show/hide div.
Lets see a sample code.

1. HTML Code: the HTMl code will look almost same as above code. Only difference will be that we only have one button now.

2. jquery functions
Similar to HTML code, we will have only one jquery function now, that uses the toggle() function.

Output will look like this.
How To Show Hide Div in Jquery