CODEWITHSUNDEEP
javascriptjquerycss
Drew Peer
Drew Peer

Reputation: 377

temporary css changes by javascript

I am using a custom toggle switch on my website, which can be switched ON or OFF. Depending if it is ON or OFF (checked or unchecked) there are different CSS classes applying to the switch and changing the style.

I want to turn this toggle switch on / off using javascript. However a change of the status "checked / unchecked" does not make a change. This leads to me having to adjust the CSS style of the switch to turn it e.g. OFF.

However, this leads to the problem now. When I change the CSS using javascript, I basically add styles to the element directly. This leads to the normal toggle switch CSS not working anymore as the element style overrides any class style. If i assign an additional class to the switch , the normal style overrides the class. using !important is not an option, as it stay permanently OFF / ON

Is there any way to apply CSS to an element, without automatically disabling the default CSS style changes? like setting a CSS style until the next normal change happens?

HTML

<div class="onoffswitch active" id="recurringdiv">
  <p>Recurring</p> 
  <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked=""> 
  <label class="onoffswitch-label" for="myonoffswitch" data-click-state="0" id="recurringfield"> 
    <span class="onoffswitch-inner custom1"></span> 
    <span class="onoffswitch-switch custom2"></span>
  </label> 
</div>

JS

$(document).ready(function() {
  $('.onoffswitch-label').on('click', function() {
    if ($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0)
      /*Click State 1 finish*/
    } else {
      $(this).attr('data-click-state', 1)
      /*Click State 2 finish*/
    }
  });
});

<!-- This is the autopay -->
$(document).ready(function() {
  $('.auto-onoffswitch-label').on('click', function() {
    if ($(this).attr('data-click-state') == 1) {
      $(this).attr('data-click-state', 0)
      /*Click State 1 finish*/
    } else {
      $(this).attr('data-click-state', 1)
      /*Click State 2 finish*/
    }
  });
});

CSS

.auto-onoffswitch-checkbox:checked + .auto-onoffswitch-label .auto-onoffswitch-switch {
  right: 0px;
}
.auto-onoffswitch-switch {
  display: block;
  width: 18px;
  margin: 6px;
  background: #FFFFFF;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 56px;
  border: 2px solid #a9a9a9;
  border-radius: 20px;
  transition: all 0.3s ease-in 0s;
}

Upvotes: 2

Views: 1417

Answers (1)

Tom
Tom

Reputation: 936

If you cannot change the status of the element using CSS/ normal jquery I would recommend using a click event. 

if (condition == true) {
jQuery(".onoffswitch-switch").trigger('click');
}

Its simple and should do the trick

Upvotes: 1

Related Questions