Swith On Off

Swith On Off for bootstrap

by Ankit Patidar

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<button class="btn btn-success switch" data-state="on">On <span class="glyphicon glyphicon-stop"></span></button>

JavaScript

$(".switch").click(function(e){
    if($(this).attr("data-state") == "on"){
        $(this).attr("data-state", "off");
        $(this).removeClass("btn-success");
        $(this).addClass("btn-default");
        $(this).html('<span class="glyphicon glyphicon-stop"></span> Off');
    }
    else if($(this).attr("data-state") == "off"){
        $(this).attr("data-state", "on");
        $(this).removeClass("btn-default");
        $(this).addClass("btn-success");
        $(this).html('On <span class="glyphicon glyphicon-stop"></span>');
    }
})