Do you want to know how to show and hide div when the user clicks on a button?
With the help of JavaScript’s onclick event, you can easily toggle the visibility of an <div> element when a user clicks a button. This allows you to show or hide content on your webpage dynamically.
AD
To add this function to your web page, first, you need to add a script tag just below the closing body tag. If you are already using JavaScript on your web page, then you can add this new code to your existing JavaScript section.
1. Add an “button” Element and Div in HTML
First, I’ll add an HTML <button> element to my file with the text “Toggle Div”.
To make it work with JavaScript, I’ll also add an onclick event to the <button> element. This will allow me to link it with JavaScript later. Here’s what the code looks like:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show/Hide Div</title>
</head>
<body>
<button onclick="toggleDiv()">Toggle Div</button>
</body>
</html>
Now, I’ll add the <div> that I want to show and hide when the user clicks the “Toggle Div” button. Make sure to give your <div> an id so you can easily select it later in JavaScript.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Show/Hide Div</title>
</head>
<body>
<button onclick="toggleDiv()">Toggle Div</button>
<div id="myDiv">
This is the content of the div.
</div>
</body>
</html>
2. Define the “toggleDiv” Function in JavaScript
AD
Now, I’ll add some code to the JavaScript section. If you’re already using JavaScript, you can add this code there. Otherwise, you can simply place a <script> tag just before the closing </body> tag.
function toggleDiv() {
}3. Select the “div” Inside “toggleDiv”
Inside the toggleDiv function, select the <div> you added in HTML using document.getElementById(). In my case, I have assigned the <div> an id of "myDiv".
Now, store the selected <div> in a variable with any name, for example, "div". Here’s how you can select the <div> inside the toggleDiv function:
function toggleDiv() {
var div = document.getElementById("myDiv");
}4. Toggle the CSS Class
To show and hide the <div>, I’ll use JavaScript’s classList property along with the toggle() method. This allows me to add or remove the class name whenever the user clicks the button.
To make this work, first, select the <div> element and store it in a variable. Then, use the classList property and call the toggle method on it. This will add the "show" class if it’s not present and remove it if it is.
function toggleDiv() {
var div = document.getElementById("myDiv");
div.classList.toggle("show");
}
In the function above, JavaScript will toggle the "show" class on the <div> whenever the user clicks the button. This means the class will be added when the <div> is hidden and removed when it’s visible, effectively showing and hiding the content.
5. Control Visibility with CSS
AD
We have one final step to complete to make the Show/Hide Div onClick functionality work. For this, I’ll add some CSS properties to the “show” class to control the visibility of the <div>.
First, I’ll target the <div> using the #myDiv ID, which I assigned to the <div> tag. Make sure to set the display property to none so that the <div> remains hidden when the page initially loads.
Then, I’ll select the .show class and set its display property to block. I’ll also add !important to ensure it overrides any existing values.
<style>
#myDiv {
display: none;
padding: 10px;
background-color: lightblue;
border: 1px solid #ccc;
margin-top: 10px;
}
.show{
display: block !important;
}
</style>Now, when you save and load the page, the <div> container will not be visible. However, when you click the button, it will appear because JavaScript adds the "show" class to the <div>, which has the display: block; property.
To enhance its appearance, I’ve added some extra CSS. Here’s how it looks now:
You can view the complete code, including the updated CSS, on CodePen.
I hope this blog post helps you to find how to use Javascript to Show/Hide Div onClick, you may also want to know How to Validate the Form in JavaScript Before Submit.
If you found this post helpful, don’t forget to share it with your friends and subscribe to our SingleSyntax YouTube channel for amazing video tutorials.