. Advertisement .
..3..
. Advertisement .
..4..
If you are wondering how to show/hide a div element by id using javascript, then consider referring to this article. Here, we have outlined possible methods that you can apply. Now let’s find out what those methods are.
What can we do to show/hide a div element by id using javascript?
Div( stands for “division”) is a tag used to combine several HTML elements. The function of every HTML tag is distinct. A block (block) that contains multiple other tags is designated with the div tag. The div tag aids in creating different sections within HTML text.
Method 1: Use JavaScript
You can try using JavaScript to show/hide a div using the getElementById() method, the display property, and an if-else conditional statement.
var displayStatus = document.getElementById("someDiv");
if ( displayStatus.style.display == 'none' ){
displayStatus.style.display = 'block';
} else {
displayStatus.style.display = 'none';
}
We also target the element’s display property to show/hide the div. Obtaining the div’s id and changing its display property to “block” if it is hidden or “none” if it is shown is all that is required. We shall put this to the test using the if-else conditional expression.
var displayStatus = document.getElementById("div1");
if ( displayStatus.style.display == 'none' ){
displayStatus.style.display = 'block';
} else {
displayStatus.style.display = 'none';
}
Significantly, jQuery’s toggle() method makes it simple to show/hide (or toggle) a div.
Method 2: Show/hide a div with a button click
To make a div visible or invisible when clicked, you can include the onclick event listener in the button element. In the onclick listener for the button, the display attribute of the div> will be changed from its default value of block to none.
For instance, let’s say you have the following HTML “body” element:
<body>
<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<div id="third">This is the THIRD div</div>
<button id="toggle">Hide THIRD div</button>
</body>
On clicking, the button>top element is designed to show or hide the div id=”third”> element. Afterward, you must do the following to the button> element to add the onclick event handler:
const targetDiv = document.getElementById("third");
const btn = document.getElementById("toggle");
btn.onclick = function () {
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
} else {
targetDiv.style.display = "block";
}
};
Setting the show attribute to none will cause the HTML to seem as if the div> element never existed.
If you click on the <button> element again, the <div> attribute can be displayed on the HTML page since the display attribute will be set back to the block.
When you use the following <script> tag, you will be able to add the JavaScript code to your HTML <body> tag.
<body>
<div id="first">This is the FIRST div</div>
<div id="second">This is the SECOND div</div>
<div id="third">This is the THIRD div</div>
<button id="toggle">Hide THIRD div</button>
<script>
const targetDiv = document.getElementById("third");
const btn = document.getElementById("toggle");
btn.onclick = function () {
if (targetDiv.style.display !== "none") {
targetDiv.style.display = "none";
} else {
targetDiv.style.display = "block";
}
};
</script>
</body>
Summary
Thank you for taking the time to read the article. What do you think of the methods to show/hide a div element by id using javascript that we gave above? Please leave in the comment section your thoughts and opinions. Good luck!
Read more:
Leave a comment