Add the class name when clicking on the element, and remove the class name when clicking outside the element to toggle the class
Toggle a class by adding a class name when clicking on an element and removing it when clicking outside the element
Sometimes, we need to highlight an HTML element when clicking on it and restore it to normal when clicking outside of it. We can achieve this by toggling a class within the element. In this context, “toggling a class” means adding and removing a class.
In this tutorial, we’ll learn how to add a class name to an element when the user clicks on it and remove it from it when the user clicks outside of it.
Use the add() and remove() methods to toggle classes on click inside and outside an element
In JavaScript, the add() method is used to add elements to an array, and the remove() method is used to remove elements from an array. Here, we’ll access the class list of a specific HTML element, which is an array. Furthermore, we’ll use the add() and remove() methods to add and remove classes from the class list.
Syntax
Users can use the add() and remove() methods with the following syntax to add a class when clicking an element and remove a class when clicking outside the element.
box.addEventListener('click', function () {
//Add class
});
document.addEventListener('click', function (event) {
if (event.target !== targeted_element)
//Remove class
});
In the above syntax, we add a class to the classList when the user clicks the box and remove the class when the user clicks outside the element.
Example 1
In the example below, we have a div element with a class name of “box”. We use CSS to apply some styling to the “box” class. Additionally, we add some CSS properties to the “inner” class.
In JavaScript, when the user clicks the box, we add the “inner” class to the box element. Furthermore, in the callback function, we check if the target element is a box. If not, we remove the “inner” class from the box.
<html>
<head>
<style>
.inner {
width: 450px;
height: 200px;
background-color: red !important;
color: white !important;
padding: 10px;
border-radius: 5px;
font-size: 30px !important;
font-weight: bold;
text-align: center;
}
.box {
width: 500px;
height: 200px;
border: 2px solid green;
color: blue;
font-size: 1rem;
}
</style>
</head>
<body>
<h3>Toggle classes using JavaScript's add() and remove() methods</h3>
<div class = "box">Click the button to toggle the class. </div>
<script>
var box = document.querySelector('.box');
//Add the 'inner' class when the user clicks the box
box.addEventListener('click', function () {
box.classList.add('inner');
});
//Remove the 'inner' class when the user clicks outside the box
document.addEventListener('click', function (event) {
if (event.target !== box)
box.classList.remove('inner');
});
</script>
</body>
</html
Example 2
In HTML, when you click inside an input box, it highlights the input box, and when you click outside the input box, it removes the highlight from the input box.
In the following example, we’ll create a custom input box that highlights when the user clicks inside it.
Here, we add the “active” class to the div element when the user clicks on it, and remove the “active” class when the user clicks outside the input box.
<html>
<head>
<style>
.input {
width: 400px;
height: 30px;
border: 1px solid grey;
color: grey;
padding: 5px;
}
.active {
border: 2px solid blue !important;
color: blue;
}
</style>
</head>
<body>
<h3>Toggle classes using `add()` and `remove()` functions in JavaScript</h3>
<div class = "input"> Enter your name</div>
<script>
var input = document.querySelector('.input');
input.addEventListener('click', function () {
input.classList.add('active');
});
document.addEventListener('click', function (event) {
if (event.target !== input)
input.classList.remove('active');
});
</script>
</body>
</html>
Using the ToggleClass() Method
The toggleClass() method allows users to add and remove classes from an HTML element. Here, we’ll add a class when the user clicks the element and remove it when the user clicks outside the element.
Syntax
Users can use the toggleClass() method to add and remove classes from an element using the following syntax.
initial.classList.toggle('clicked');
In the above syntax, “initial” is the HTML element accessed in JavaScript. It adds and removes the “clicked” class to the HTML element.
Steps
- Step 1 − Define “clickInside” and “clickOutside” variables and initialize them with true and false values.
-
Step 2 − Access the div element in JavaScript and add a click event listener.
-
Step 3 − In the event listener’s callback function, if “clickInside” is false, it means the user last clicked outside. Therefore, we need to use the toggleClass() method to add the “clicked” class to the div element.
-
Step 4 − Change the value of the “clickInside” variable to true and the value of the “clickOutside” variable to false.
-
Step 5 − Add a click event listener to the HTML document. Here, if the value of the “clickOutside” variable is false and the target element is not the initial div, use the toggleClass() method to remove the “clicked” class from the div element.
-
Step 6 − Change the value of the “clickOutside” variable to true and the value of the “clickInside” variable to false.
Example 3
In the following example, we use the custom algorithm described above to add a class to an HTML element when the user clicks the element, and use the toggleClass() method to remove the class from the HTML element when the user clicks outside the element.
In the output, users can notice that it changes size and font color when they click on the div element, and returns to its normal state when they click outside the div element.
<html>
<head>
<style>
.initial {
width: 400px;
height: 250px;
border: 1px solid grey;
color: grey;
padding: 5px;
font-size: 3rem;
}
.clicked {
color: red !important;
border: 1px solid red !important;
width: 500px;
height: 200px;
}
</style>
</head>
<body>
<h2>Toggle classes using `toggleClass()` in JavaScript</h2>
<div class = "initial">This is the clickable div</div>
<script>
var initial = document.querySelector('.initial');
//Initial value of clickable variable
var clickedInside = false;
var clickedOutside = true;
initial.addEventListener('click', function () {
if (!clickedInside) {
initial.classList.toggle('clicked');
clickedInside = true;
clickedOutside = false;
}
});
document.addEventListener('click', function (event) {
if (event.target !== initial && !clickedOutside) {
initial.classList.toggle('clicked');
clickedInside = false;
clickedOutside = true;
}
}); </script>
</body>
</html>
In these two methods, we learned how to add a class to an HTML element when clicking it, and remove a class from it when clicking outside of it. In the first method, we used the add() and remove() methods. In the second method, we used the toggleClass() method.