CODEWITHSUNDEEP
htmlcsstoggle
user2812779
user2812779

Reputation: 313

Using a CSS toggle on a div instead of input field

I was searching for a way to make some kind of toggle button and I found one that is exactly how I wanted but this example is using the toggle on an input field and I want to use it on a div. I tried several things changing the CSS classes but for some reason I can't get it working properly.

This is the example CSS I am using:

.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: #2ab934;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

input:checked + .slider:after
{  
  content:'ON';
}

/*--------- END --------*/

This is the example HTML:

<label class="switch"><input type="checkbox" id="togBtn"><div class="slider round"></div></label>

When I use it like this everything is working fine but my HTML and the div I want to toggle is like this:

<div class="facetwp-facet facetwp-facet-aanbieding facetwp-type-checkboxes" data-name="aanbieding" data-type="checkboxes">
    <div class="facetwp-checkbox" data-value="ja">Ja</div>
</div>

I made changes to the example CSS to make it work on the div I want to toggle but I'm a bit lost here on how to get this working.

Maybe it is very simple but I'm lost so if somebody could help me out a little bit that would be great!

Upvotes: 2

Views: 737

Answers (1)

Rayees AC
Rayees AC

Reputation: 4659

I added checked class to slider div instead of :checked the input checkbox.

So some changes in CSS code.

.slider.checked{...} instead of input:checked + .slider {...}

.slider:focus{...} instead of input:focus + .slider {...}

.slider.checked:before {...} instead of input:checked + .slider:before {...}

Try the Demo in Jquery

  • Using Jquery for clicking the slider div to toggle class checked.

$(".slider").click(function(){
  $(this).toggleClass("checked");
});
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}


.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.slider.checked{
  background-color: #2ab934;
}

.slider:focus{
  box-shadow: 0 0 1px #2196F3;
}

.slider.checked:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

.slider.checked:after
{  
  content:'ON';
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="switch">
    <div class="slider round"></div>
</div>

Try the Demo in Javascript

  • Using Javascript for clicking the slider div to toggle class checked.

function sliding(obj){
 obj.classList.toggle("checked");
}
.switch {
  position: relative;
  display: inline-block;
  width: 90px;
  height: 34px;
}


.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ca2222;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
  border-radius: 50%;
}

.slider.checked{
  background-color: #2ab934;
}

.slider:focus{
  box-shadow: 0 0 1px #2196F3;
}

.slider.checked:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(55px);
}

/*------ ADDED CSS ---------*/
.slider:after
{
 content:'OFF';
 color: white;
 display: block;
 position: absolute;
 transform: translate(-50%,-50%);
 top: 50%;
 left: 50%;
 font-size: 10px;
 font-family: Verdana, sans-serif;
}

.slider.checked:after
{  
  content:'ON';
}
<div class="switch">
    <div onclick="sliding(this);" class="slider round"></div>
</div>

Upvotes: 3

Related Questions