In the realm of web design, toggle buttons stand as versatile and engaging components, enabling users to effortlessly switch between different states or options. These interactive elements add a touch of dynamism to web interfaces, making them more user-friendly and intuitive. Whether it's toggling between light and dark modes, enabling or disabling features, or simply indicating a selection, toggle buttons seamlessly integrate into various web applications.
In this blog post you'll learn to make toggle button using HTML, CSS and JavaScript. This blog also guides you on how you can change the elements styling according to the toggle switch state (on or off). In previous blog posts, I've created simple toggle buttons using HTML and CSS. Now, let's take it a step further by incorporating JavaScript to enhance functionality and interactivity.
I'll guide you through the process of creating an interactive toggle switch using HTML, CSS, and JavaScript. We will cover the styling of the toggle switch, adding functionality like sliding the button and changing colours based on the checkbox state, and enhancing the user experience with smooth animations. The guides includes screenshots, step by step tutorial, demonstration, whole video tutorial and source code (end of the blog post). You can see demo in below YouTube video.
You’ll learn in this blog:
- How to check checkbox status using JavaScript.
- Working toggle button using JavaScript.
- How to change element styling using JavaScript, and according to toggle switch status or checkbox status.
- Change background colour.
Video Tutorial on Toggle Switch Using JavaScript.
Toggle Switch in JavaScript.
File structure:
- Index.html
- Index.css
I’ve added JavaScript code directly into the HTML file. Alternatively, you can create a separate JavaScript file and link it to the HTML file using a script tag.
We going to create this toggle switch in 2 simple steps.
Step 1: Create the design of toggle switch.
First let create a simple toggle switch. We going to create toggle switch using checkbox. We make On or OFF toggle button (slide the circle right or left) according to checkbox state.
By adding checkbox inside the label tag, we can change checkbox state on click on label (bind the input checkbox with label tag).
As we bind the checkbox with label tag so its alright to hide it (and it still functional).
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Toggle Button | maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="background_box">
<!-- toggle button -->
<label class="toggle_box">
<input type="checkbox" id="checkbox">
<div class="circle"></div>
</label>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
}
body {
width: 100%;
height: 100vh;
}
.background_box{
width: 100%;
height: 100vh;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
transition: 0.5s;
transition-delay: 0.4s;
}
.toggle_box{
width: 200px;
height: 100px;
display: block;
background-color: #000;
border-radius: 1000px;
cursor: pointer;
position: relative;
transition: 0.5s;
}
input[type="checkbox"]{
display: none;
}
.circle{
position: absolute;
width: 80px;
height: 80px;
left: 0px;
background-color: #fff;
border-radius: 1000px;
/* margin-top: 10px;
margin-bottom: 10px;
margin-left: 10px;
margin-right: 10px; */
margin: 10px;
transition: 0.5s;
}
Output:
So, the design of toggle switch is ready. But right now, when user click on it, the circle inside toggle switch will not slide. So, for that we going to use JavaScript.
You can also achieve this functionality using CSS. You can also check the checkbox state and add styles using CSS.
Also read: Toggle button using CSS.
Step 2: Create working toggle button with JavaScript.
To add functionality in toggle switch to slide the circle according to checkbox state.
First, we have to check the state of checkbox using JavaScript and if it’s checked then we slide the circle to right (by changing its styling in JavaScript), And if unchecked the we slide it to left.
JavaScript
let background_box = document.querySelector(".background_box");
let toggle_box = document.querySelector(".toggle_box");
let circle = document.querySelector(".circle");
let checkbox = document.getElementById("checkbox");
toggle_box.onclick = function(){
if(checkbox.checked){
circle.style.transform = "translateX(100px)";
}else{
circle.style.transform = "translateX(0px)";
}
}
Output:
Now the toggle button is working.
You can also change the other HTML elements styling according to checkbox state or toggle switch state.
Changing other HTML elements styles based on checkbox or toggle button state.
We going to change the background colour and the toggle switch itself colour on ON and OFF (state).
JavaScript
toggle_box.onclick = function(){
if(checkbox.checked){
circle.style.transform = "translateX(100px)";
circle.style.backgroundColor = "#000";
toggle_box.style.backgroundColor = "#fff";
background_box.style.backgroundColor = "#000";
}else{
circle.style.transform = "translateX(0px)";
circle.style.backgroundColor = "#fff";
toggle_box.style.backgroundColor = "#000";
background_box.style.backgroundColor = "#fff";
}
}
Output:
So that’s it you can create toggle switch using JavaScript and change html elements colours with JavaScript according to checkbox status. If you have any query or suggestion feel free to leave a comment below.
Share your thoughts.