An Interest In:
Web News this Week
- March 3, 2024
- March 2, 2024
- March 1, 2024
- February 29, 2024
- February 28, 2024
- February 27, 2024
- February 26, 2024
March 21, 2022 06:08 pm GMT
Original Link: https://dev.to/asapsonter/simple-toggle-buttononoff-3k2i
Simple Toggle Button(On/Off)
Hi guys, I was doing a project that required an ON/OFF switch. I kinda had a tough time creating a switch button. After finding my way around, I thought this migth be helpful for other people.
<div class="container"> <div class="toggle"> <div class="toggle-btn" onclick="Animatedtoggle()"></div> </div> <div class="text">OFF</div> </div>
Create elements "toggle", "toggle-btn", and a "text" with OFF property. Create a button property inside the the toggle-btn div.
let toggle = document.querySelector(".toggle"); let text = document.querySelector(".text") function Animatedtoggle(){ toggle.classList.toggle('active'); if(toggle.classList.contains('active')){ text.innerHTML = "ON"; } else { text.innerHTML = "OFF"; } }
queryselect element ".toggel" to variable toggle.
do the same thing with "text".
classList toggle ('active') and then write a if loop for true "ON" and else "OFF".
Below is the full code template including stylesheet.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>button</title> <link rel="stylesheet" href="stylesheet.css"></head><body> <div class="container"> <div class="toggle"> <div class="toggle-btn" onclick="Animatedtoggle()"></div> </div> <div class="text">OFF</div> </div> <script> let toggle = document.querySelector(".toggle"); let text = document.querySelector(".text") function Animatedtoggle(){ toggle.classList.toggle('active'); if(toggle.classList.contains('active')){ text.innerHTML = "ON"; } else { text.innerHTML = "OFF"; } } </script></body></html>
* { margin: 0; padding: 0; box-sizing: border-box;}body { height: 100vh; position: relative; background: aquamarine;}.container { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 50px; display: flex; align-items: center; justify-content: center;}.container .toggle { position: absolute; top: 0; left: 0; width: 90px; height: 40px; background: rgb(8, 0, 15); border-radius: 55px; cursor: pointer; transition: 0.3;}.container .toggle .toggle-btn { position: absolute; top: 5px; left: 5px; width: 40px; height: 30px; background: rgb(132, 115, 148); border-radius: 25px; transition: 0.3;}.container .toggle.active { background:whitesmoke;}.container .toggle.active .toggle-btn { left: 40px;}.text { position: absolute; left: 2.5cm; font-size: 1.5rem; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; margin-left: 8px;}
Original Link: https://dev.to/asapsonter/simple-toggle-buttononoff-3k2i
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To