Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Toggle class by adding the class name when element is clicked and remove when clicked outside
Sometimes, we need to highlight the HTML element when we click it and make it normal when we click outside the HTML element. We can achieve it by toggling the class in the element. Here, the meaning of the toggling class is adding and removing the class.
In this tutorial, we will learn to add the class name to the element when users click the element and remove the class name from the element when users click outside the element.
Using the Add() and Remove() Method to Toggle Class When Clicking Inside and Outside of the Element
In JavaScript, add() method is used to add an element to the array, and the remove() method is used to remove an element from the array. Here, we will access the class list of the particular HTML element, which is an array. Also, we will use the add() and remove() methods with the class list to add and remove the class from the HTML element.
Syntax
Users can follow the syntax below to use the add() and remove() methods to add a class when the user clicks the element and remove the class when the user clicks 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 we remove the class if the user clicks outside the element.
Example 1
In the example below, we have a div element with the ‘box’ class name. We have applied some styles to the ‘box’ class using CSS. Also, we have added some CSS properties in the ‘inner’ class.
In JavaScript, when users click the box, we add an ‘inner’ class to the box element. Furthermore, we have added the click event on the web page. In the callback function, we check if the targeted element is a box. We don’t remove the ‘inner’ class from the box; Otherwise, 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> Toggling the class using the <i> add() and remove() </i> method of JavaScript </h3>
<div class = "box"> Click on and out the button to toggle the class. </div>
<script>
var box = document.querySelector('.box');
//Add 'inner' class when users click on the box
box.addEventListener('click', function () {
box.classList.add('inner');
});
//Remove the 'inner' class when users click 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 on the input box, it highlights the input box, and when you click outside of the input box, it removes the highlighter from the input box.
In the example below, we will create a custom input box that can be highlighted when users click on the input box.
Here, we add the ‘active’ class to the div element when the user clicks on the div element, and we remove the ‘active’ class when users click 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> Toggling the class using the <i> add() and remove() </i> method of 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 the class from the HTML element. Here, we will add a class to the element when users click the element and remove the class whenever users click outside the element.
Syntax
Users can follow the syntax below to use the toggleClass() method to add and remove classes from the element.
initial.classList.toggle('clicked');
In the above syntax, ‘initial’ is an HTML element accessed in JavaScript. It adds and removes the ‘clicked’ class from the HTML element.
Steps
Step 1 − Define the ‘clickInside’ and ‘clickOutside’ variables and initialize them with true and false values, respectively.
Step 2 − Access the div element in JavaScript and add a click event listener.
Step 3 − In the callback function of the event listener, if ‘clickInside’ is false, it means users have clicked outside the last time. So, we require to add a ‘clicked’ class using the toggleClass() method into the div element.
Step 4 − Change the value of the ‘clickInside’ variable to true and 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 targeted element is not the initial div, remove the ‘clicked’ class from the div element using the toggleClass() method.
Step 6 − Change the value of the ‘clickOutside’ variable to true and the ‘clickInside’ variable to false.
Example 3
In the example below, we have used the custom algorithm explained above to add a class to the HTML element when users click on the class and remove the class from the HTML element when users click outside using the toggleClass() method.
In the output, users can observe that it changes the dimensions and font colour. When they click on the div element, and when users click outside of the div element, which makes it normal.
<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> Toggling the class using the <i> toggleClass() </i> method of JavaScript </h2>
<div class = "initial">This is a clickable div </div>
<script>
var initial = document.querySelector('.initial');
// initial values of clickable variables
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>
Users learned to add a class to the element when we click on the element and remove the class from the element when we click outside of the element using various approaches. In the first approach, we have used the add() and remove() methods. In the second approach, we have used the toggleClass() method.
4K+ Views
To Continue Learning Please Login