How to hide and show div on button click using jQuery?

Question

How to hide and show div on button click using jQuery?

4

(1.1K Views)

I am a beginner in jQuery. I am learning the jQuery framework. I want to show and hide the div on the button click using jQuery.Is there any method to hide and display the div block with one button click? I have a div block in HTML and a button.

My HTML Div block -

<div class="my_div">This is my div block </div> 
<button class="btn btn-primary">Show and hide</button>

In the above code, I have a div element that I want to hide on button click, and if I click again, then the div should be shown using a single button only in jQuery.

How can hide and show a div block with one single button click in jQuery?

html jquery js

arnabisaha (2.4K Points)

09 Oct 2022 in jquery

Answer

Share

2 Answers

Comment

Hide and show div block on a single button click in jQuery -

As you know, we can hide and show dive block using class name and id. We create a function on button click using button id or class. In this example, we will create a function click using button id.

Did you use the toggle() function in the website menu?

Yes, we will use a simple jQuery toggle() function to hide and show a div block on single button click.

<!DOCTYPE html>
<html>
<head>
	<title>How to hide and show div on button click in jQuery?</title>
	<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
	<script type="text/javascript">
	     $(document).ready(function() {
	     	$( "#my_btn" ).click(function() {
    $("#my_div").toggle();
});
  });

	</script>
</head>
<body>
	<div class="my_div" id="my_div">This is my div block.</div>
	<button type="button" class="btn btn-primary" id="my_btn">Hide and Show</button>
</body>
</html>

In the above code, you can see, I have used only jQuery toggle() function to hide and show a div block using the button id name and div block id name.

shakti · Answer 2 · 2022-10-15T14:41:22+0000

In the jQuery library, there are various methods or functions available. You have to find useful methods. If you want to hide and show a div block on a button click then you should use the jQuery hide() method and jQuery show() method.

Let's see how can you use the hide() and show() methods to hide and show div block -

Hide a div block -

 $("#my_div").hide();

my_div - div block id name

Show a div block -

 $("#my_div").show();

If you want to hide and show the HTML div block on the button click then create an example -

<!DOCTYPE html>
<html>
<head>
	<title>Hide and show div block in JavaScript using jQuery library</title>
	<script src="https://code.jquery.com/jquery-3.6.1.min.js"></script>
	<script type="text/javascript">
$(document).ready(function() {
 $( "#btn_hide" ).click(function() {
    $("#my_div").hide();
 });
 $( "#btn_show" ).click(function() {
    $("#my_div").show();
 });

});

	</script>
</head>
<body>
	<div class="my_div" id="my_div">This is my div block.</div>
	<button type="button" class="btn btn-primary" id="btn_hide">Hide</button>
	<button type="button" class="btn btn-primary" id="btn_show">Show</button>
</body>
</html>

You can click the hide button to hide a div block or if you want to show a div block content then click on the show button.

How to hide and show div on button click using jQuery?

Hide and show div block on a single button click in jQuery -

Related Questions :-