javascript show hide div onclick toggle – Simple demo with Toggle (Show Hide) DIV on Button Click using JavaScript and jQuery Example.
javascript show hide div onclick toggle
you can use the .toggle() method to toggle an element, any element.
HTML Code
<body> <div id="primary">This is the Primary div</div> <div id="mainPart">This is the mainPart div</div> <div id="uniqTds">This is the uniqTds div</div> <button id="toggle">Hide uniqTds div</button> </body>
javascript Code
const selectBasePart = document.getElementById("uniqTds");
const btn = document.getElementById("toggle");
btn.onclick = function () {
if (selectBasePart.style.display !== "none") {
selectBasePart.style.display = "none";
} else {
selectBasePart.style.display = "block";
}
};
how to show hide div in html javascript?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#userProfile {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: lightblue;
margin-top: 20px;
}
</style>
</head>
<body>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<button onclick="displayProfile()">Try it</button>
<div id="userProfile">
This is my DIV element.
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<script>
function displayProfile() {
var x = document.getElementById("userProfile");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
</script>
</body>
</html>
Don’t Miss : onclick show hide div jquery demo
I hope you get an idea about javascript show hide div onclick toggle.
I would like to have feedback on my infinityknow.com.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.