Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to toggle between hiding and showing an element with JavaScript?
To toggle between hiding and showing an element with JavaScript, you can manipulate the element's display CSS property. This technique is commonly used for creating interactive user interfaces where content needs to be dynamically shown or hidden.
Basic Toggle Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
button {
padding: 10px;
border: none;
background-color: rgb(51, 51, 192);
color: white;
font-size: 18px;
cursor: pointer;
}
.div-visible {
width: 100%;
padding: 50px 0;
text-align: center;
background-color: rgb(210, 230, 173);
margin-top: 20px;
font-size: 18px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>Toggle hide and show example</h1>
<button class="toggleDisplay">Toggle Div</button>
<h2>Click the button to toggle the div below</h2>
<div class="div-visible">
This is a div element that can be toggled!
</div>
<script>
document.querySelector(".toggleDisplay").addEventListener("click", toggleDivDisplay);
function toggleDivDisplay() {
var element = document.querySelector(".div-visible");
var button = document.querySelector(".toggleDisplay");
if (element.style.display === "none") {
element.style.display = "block";
button.textContent = "Hide Div";
} else {
element.style.display = "none";
button.textContent = "Show Div";
}
}
</script>
</body>
</html>
Using the hidden Attribute
Another approach is to use the HTML5 hidden attribute, which provides a more semantic way to hide elements:
<!DOCTYPE html>
<html>
<head>
<style>
.content-box {
padding: 20px;
background-color: lightblue;
margin: 10px 0;
}
button {
padding: 8px 16px;
background-color: #007cba;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="toggleContent()">Toggle Content</button>
<div id="content" class="content-box">
This content can be toggled using the hidden attribute!
</div>
<script>
function toggleContent() {
var content = document.getElementById("content");
content.hidden = !content.hidden;
}
</script>
</body>
</html>
Toggle with CSS Classes
A more flexible approach uses CSS classes with the classList.toggle() method:
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 200px;
height: 100px;
background-color: coral;
margin: 20px 0;
transition: opacity 0.3s ease;
}
.hidden {
display: none;
}
button {
padding: 10px;
background-color: #28a745;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<button onclick="toggleBox()">Toggle Box</button>
<div id="myBox" class="box">
Toggle me with CSS classes!
</div>
<script>
function toggleBox() {
document.getElementById("myBox").classList.toggle("hidden");
}
</script>
</body>
</html>
Comparison of Methods
| Method | Pros | Cons |
|---|---|---|
| style.display | Direct control, widely supported | Inline styles, harder to maintain |
| hidden attribute | Semantic HTML, clean code | Limited browser support for old browsers |
| CSS classes | Flexible, allows animations, clean separation | Requires additional CSS |
Output
The examples above will create interactive buttons that toggle the visibility of content. Initially, the content is visible, and clicking the button will hide it. Clicking again will show it.
Conclusion
JavaScript provides multiple ways to toggle element visibility. Use style.display for simple cases, hidden attribute for semantic HTML, or CSS classes for more advanced styling and animations.
1K+ Views
