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 text with JavaScript?
Text toggling allows you to dynamically change displayed content based on user interaction. This is commonly used for showing/hiding information, switching between states, or creating interactive UI elements.
Basic Toggle Example
Here's a complete example that toggles between two text values when a button is clicked:
<!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;
}
.textDiv {
font-size: 20px;
background-color: rgb(199, 228, 157);
width: 100%;
padding: 15px;
font-weight: bold;
margin: 10px 0;
}
.toggleBtn {
padding: 15px;
border: none;
background-color: rgb(106, 41, 153);
color: white;
font-size: 18px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Toggle Text Example</h1>
<button class="toggleBtn">Click Me</button>
<h2>Click on the above button to toggle below text</h2>
<div class="textDiv">Old Text</div>
<script>
document.querySelector(".toggleBtn").addEventListener("click", toggleText);
function toggleText() {
var textElement = document.querySelector(".textDiv");
if (textElement.innerHTML === "Old Text") {
textElement.innerHTML = "New Text";
} else {
textElement.innerHTML = "Old Text";
}
}
</script>
</body>
</html>
How It Works
The toggle function checks the current content of the text element and switches it to the alternative text. The addEventListener method binds the click event to our toggle function.
Alternative Approach Using textContent
For better security when dealing with plain text, use textContent instead of innerHTML:
<script>
document.querySelector(".toggleBtn").addEventListener("click", function() {
var textElement = document.querySelector(".textDiv");
textElement.textContent = textElement.textContent === "Old Text" ? "New Text" : "Old Text";
});
</script>
Toggle with Multiple States
You can extend the concept to toggle between multiple text values:
<script>
let currentIndex = 0;
const textOptions = ["First Text", "Second Text", "Third Text"];
document.querySelector(".toggleBtn").addEventListener("click", function() {
var textElement = document.querySelector(".textDiv");
currentIndex = (currentIndex + 1) % textOptions.length;
textElement.textContent = textOptions[currentIndex];
});
</script>
Key Points
- Use
innerHTMLfor HTML content,textContentfor plain text - Store references to DOM elements to improve performance
- Consider using data attributes to store state information
- The ternary operator provides a concise way to toggle between two values
Conclusion
Text toggling is achieved by checking the current content and switching to an alternative value. This technique is fundamental for creating dynamic, interactive web interfaces.
2K+ Views
