How to make a toggle button with vanilla javascript and css without any html

Question

I tried to find a solution and people always gave either solutions with html or jQuery or what have you.

So I made one and thought it might be helpful for others.

Explain how this is any useful. A component that cannot be used with markup seems very narrow. — connexo
– connexo, Commented Apr 15, 2021 at 16:00

Sam · Accepted Answer · 2021-04-15 15:28:35Z

4

let defaultSetting = "off" 

const toggleButton = document.createElement('toggleButton'); 
toggleButton.onclick  = function(){toggleSwitchTransformFunction()}; 
document.body.appendChild(toggleButton); 

const toggleSwitchCircle = document.createElement('toggleSwitchCircle'); 
toggleButton.appendChild(toggleSwitchCircle); 

function toggleSwitchTransformFunction() { 
  if(defaultSetting == "off"){ 

    defaultSetting = "on" 
    toggleSwitchCircle.style.transform = "translateX(100%)" 
    toggleButton.style.background = "black"

    // execute code when ON

  } else if(defaultSetting == "on"){ 
    defaultSetting = "off" 
    toggleSwitchCircle.style.transform = "translateX(0%)" 
    toggleButton.style.background = "white"

    // execute code when OFF

  }  
}

toggleButton{ 
  width: 84px; 
  min-width: 84px; 
   display: block; 
   padding: 4px; 
   border: 1px black solid; 
   border-radius: 60px; 
   transition: 0.5s; 
   
 } 
 toggleSwitchCircle { 
   display: block; 
   width: 40px; 
   height: 40px; 
   border: 1px black solid; 
   background-color: white;
   border-radius: 50%; 
   transition: 0.5s; 
 }

edited Apr 15, 2021 at 15:28

answered Apr 15, 2021 at 15:20

Sam

13411 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

connexo Over a year ago

Your are creating invalid HTML this way. Custom elements must have a dash in their name.

Sean Stopnik · Accepted Answer · 2021-04-15 15:59:18Z

You can also easily do a pure CSS toggle by using an input and label.

https://codepen.io/seanstopnik/pen/f0d8ba0f9b0a317c324ee16f49ba945c

document.body.innerHTML = document.body.innerHTML +
  "<div class=\"toggle\"><input id=\"toggle1\" class=\"toggle__checkbox\" type=\"checkbox\"><label for=\"toggle1\" class=\"toggle__label\"></label></div>";

/* For demo only */
body {
  font-family: sans-serif;
  background: #2d4a65;
  padding: 60px;
}

/* Toggle */
.toggle {
  position: relative;
  width: 80px;
  height: 40px;
  border-radius: 20px;
  box-shadow: inset 0 2px 1px rgba(0, 0, 0, 0.1);
  background-color: #1e3648;
  overflow: hidden;
}

.toggle__checkbox {
  position: absolute;
  left: -9999px;
}

.toggle__label {
  position: relative;
  display: inline-block;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background-color: #fff;
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.toggle__label:before, .toggle__label:after {
  position: absolute;
  top: 0;
  color: #fff;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  line-height: 32px;
  transition: all 0.15s ease-in-out;
}
.toggle__label:before {
  left: -30px;
  content: "on";
  opacity: 0;
}
.toggle__label:after {
  left: 37px;
  content: "off";
  opacity: 1;
}

.toggle__checkbox:checked ~ .toggle__label {
  left: 44px;
}
.toggle__checkbox:checked ~ .toggle__label:before {
  opacity: 1;
}
.toggle__checkbox:checked ~ .toggle__label:after {
  opacity: 0;
}

Collectives™ on Stack Overflow

How to make a toggle button with vanilla javascript and css without any html

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related