1

I have created a toggle switch using css.

I want #box1 to turn from a white background with black type to a black with white text and the toggle to turn to on.

I'm stuck trying to figure out the JavaScript. The button doesn't switch and the box doesn't turn back to white.

$('#myonoffswitch').change(function(){   
    console.log('here');
    if ($(this).click())
    {
        $('#box1').addClass('dark-mode');
    }
    else
    {
        $('#box1').removeClass('dark-mode');
    }
});

How can toggle the dark-mode class.

Fiddle

Improve this question

1 Answer 1

Reset to default
1

You can just use the toggleClass method. Demo

$('#myonoffswitch').change(function(){   
    $('#box1').toggleClass('dark-mode');    
});

$(this).click() returns an instance of jQuery, which is a truthy value in JavaScript, this is why addClass was called in the first place

$('#myonoffswitch').change(function() {
  $('#box1').toggleClass('dark-mode');
});
.onoffswitch {
  position: relative;
  width: 90px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
.onoffswitch-checkbox {
  display: none;
}
.onoffswitch-label {
  display: block;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #999999;
  border-radius: 20px;
}
.onoffswitch-inner {
  display: block;
  width: 200%;
  margin-left: -100%;
  -moz-transition: margin 0.3s ease-in 0s;
  -webkit-transition: margin 0.3s ease-in 0s;
  -o-transition: margin 0.3s ease-in 0s;
  transition: margin 0.3s ease-in 0s;
}
.onoffswitch-inner:before,
.onoffswitch-inner:after {
  display: block;
  float: left;
  width: 50%;
  height: 30px;
  padding: 0;
  line-height: 30px;
  font-size: 14px;
  color: white;
  font-family: Trebuchet, Arial, sans-serif;
  font-weight: bold;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.onoffswitch-inner:before {
  content: "ON";
  padding-left: 10px;
  background-color: #FFFFFF;
  color: #000000;
}
.onoffswitch-inner:after {
  content: "OFF";
  padding-right: 10px;
  background-color: #FFFFFF;
  color: #000000;
  text-align: right;
}
.onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 6px;
  background: #000000;
  border: 2px solid #999999;
  border-radius: 20px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  -moz-transition: all 0.3s ease-in 0s;
  -webkit-transition: all 0.3s ease-in 0s;
  -o-transition: all 0.3s ease-in 0s;
  transition: all 0.3s ease-in 0s;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
  margin-left: 0;
}
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
  right: 0px;
  background-color: #FFFFFF;
}
#box1 {
  color: black;
  background-color: white;
  border: 1px solid;
  width: 100px;
  height: 100px;
}
#box1.dark-mode {
  color: #fff;
  background-color: #000;
  width: 100px;
  height: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="onoffswitch">
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
  <label class="onoffswitch-label" for="myonoffswitch">
    <span class="onoffswitch-inner"></span>
    <span class="onoffswitch-switch"></span>
  </label>
</div>
<br>
<div id="box1">This is text.</div>

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

2 Comments

Ok, worked in the Fiddle, exactly what I was looking for but did't worked on the site. Even when I just copy yours it dosen't work anymore. jsfiddle.net/msashuz4/33
You did not include jQuery in this fiddle. jsfiddle.net/msashuz4/33. Try this one: jsfiddle.net/msashuz4/34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.