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
Toggle class by adding the class name when element is clicked and remove when clicked outside
Sometimes, we need to highlight an HTML element when we click it and return it to its normal state when we click outside the element. We can achieve this by toggling CSS classes on the element adding a class when clicked and removing it when clicked elsewhere.
In this tutorial, we will learn to add a class name to an element when users click it and remove the class name when users click outside the element.
Syntax
element.addEventListener('click', function() {
element.classList.add('className');
});
document.addEventListener('click', function(event) {
if (event.target !== element) {
element.classList.remove('className');
}
});
Method 1: Using add() and remove() Methods
The add() method adds a class to the element's classList, while the remove() method removes it. We can combine these with event listeners to create the toggle behavior.
Example 1: Basic Toggle Functionality
In this example, we create a div element that changes its appearance when clicked and reverts when clicked outside ?
<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 300px;
height: 150px;
border: 2px solid green;
color: blue;
font-size: 1.2rem;
padding: 20px;
cursor: pointer;
transition: all 0.3s ease;
}
.highlighted {
background-color: red;
color: white;
border-radius: 10px;
font-weight: bold;
transform: scale(1.05);
}
</style>
</head>
<body>
<h3>Toggle class using add() and remove() methods</h3>
<div class="box">Click me to highlight, click outside to remove</div>
<script>
var box = document.querySelector('.box');
box.addEventListener('click', function() {
box.classList.add('highlighted');
});
document.addEventListener('click', function(event) {
if (event.target !== box) {
box.classList.remove('highlighted');
}
});
</script>
</body>
</html>
A green-bordered box appears. When clicked, it transforms to a red background with white text and slight scaling. Clicking outside removes the highlighting.
Example 2: Custom Input Field Highlight
This example demonstrates creating a custom inputlike element that highlights when focused ?
<!DOCTYPE html>
<html>
<head>
<style>
.input-field {
width: 400px;
height: 40px;
border: 1px solid #ccc;
color: #666;
padding: 10px;
cursor: text;
transition: all 0.2s ease;
}
.active {
border: 2px solid #007bff;
color: #007bff;
box-shadow: 0 0 5px rgba(0, 123, 255, 0.3);
}
</style>
</head>
<body>
<h3>Custom Input Field Highlighting</h3>
<div class="input-field">Click to focus this custom input</div>
<script>
var inputField = document.querySelector('.input-field');
inputField.addEventListener('click', function() {
inputField.classList.add('active');
});
document.addEventListener('click', function(event) {
if (event.target !== inputField) {
inputField.classList.remove('active');
}
});
</script>
</body>
</html>
A gray-bordered input-like div appears. When clicked, it gets a blue border and shadow. Clicking outside removes the focus styling.
Method 2: Using toggle() Method
The toggle() method provides a more elegant solution by automatically adding or removing a class based on its current state. However, for clickoutside functionality, we need additional logic to control the toggle behavior.
Example 3: Advanced Toggle with State Management
This example uses the toggle method with state variables to ensure proper clickinside and clickoutside behavior ?
<!DOCTYPE html>
<html>
<head>
<style>
.clickable {
width: 350px;
height: 200px;
border: 2px solid #333;
color: #333;
padding: 20px;
font-size: 1.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.clicked {
background-color: #28a745;
color: white;
border-color: #28a745;
border-radius: 15px;
}
</style>
</head>
<body>
<h3>Toggle class using toggle() method</h3>
<div class="clickable">Click me to toggle the style</div>
<script>
var element = document.querySelector('.clickable');
var isActive = false;
element.addEventListener('click', function() {
if (!isActive) {
element.classList.toggle('clicked');
isActive = true;
}
});
document.addEventListener('click', function(event) {
if (event.target !== element && isActive) {
element.classList.toggle('clicked');
isActive = false;
}
});
</script>
</body>
</html>
A gray-bordered div appears. When clicked, it transforms to green with white text and rounded corners. Clicking outside toggles it back to the original state.
Conclusion
Both methods effectively achieve the click-to-highlight and click-outside-to-remove functionality. The add()/remove() approach is more straightforward, while the toggle() method offers flexibility but requires careful state management.
6K+ Views
