user2621561 user2621561 - 6 months ago 16
jQuery Question

Toggle switch using html5 and css3

I am making a hybrid app where I want to show a toggle switch with aenter image description here customized icon on it. Any idea how to implement this.

Answer

Use this simple code

$(".switch").click(function(){
    $(this).toggleClass("on");
});
.switch {
    width: 100px;
    height: 30px;
    border: 1px solid gray;
    border-radius: 3px;
    overflow: hidden;
}

.switch > div {
    width: 50%;
    height: 100%;
    background: #A81414;
    margin-left: 0px;
    transition: all 1s;
}

.switch.on > div {
    margin-left: 50%;
    background: green;  
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switch">
    <div></div>
</div>