Hi, If you want to show hide div on click then this tutorial is for you. Here is a very simple example to do this task. You can do this method with any element of HTML.

Show/Hide div on click

Example:

First we will create a <p> tag with the text “Hello Dheeraj” and with a unique id and then we will create a button to show/hide this <p> tag. See the example below.

<p id="box">Hello Dheeraj</p>
<button type="button" id="show-hide" class="btn btn-default">Toggle Div</button>

Now include jQuery library and write some code to show/hide the <p> tag.

<script>
$('#show-hide').on('click', function(){
  $('#content').toggle();
});
</script>

What it does is whenever the show-hide button is clicked it select the <p> tag with using it’s unique id content then it checks that if the selected element is visible then it makes that element hide else show that element.

Basically .toggle() adds display:block; or display:none; properties of CSS after checking the current status of the selected element.

I hope you have got your answer. If you still have any confusion, just comment below, I will help you.

Thanks.