Bootstrap Snippet Toogle Button using HTML CSS Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="pading-bottom">
<div class="left-radio" id="insuranceswitchON">
                    <div class="custom-radio">
                        <label class="r-wrap">
                        <span class="spaceing-left"><strong>YES</strong> <small>add Trip Protection to my itinerary</small></span>
                        <input type="radio" name="yes">
                        <span class="checkmark"></span>
                        </label>
                    </div>
              </div> 
                <div class="left-radio pull-right" id="insuranceswitchOFF">
                  <div class="custom-radio">
                        <label class="r-wrap">
                            <span class="spaceing-left"><strong>NO</strong> <small>I don’t want Trip Protection</small></span>
                            <input type="radio" name="yes">
                            <span class="checkmark"></span>
                        </label>
                  </div>
              </div>  
              </div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.pading-bottom {  padding-bottom: 60px;float:left;width:100%;}
.left-radio {width:48%;float:left;}.left-radio {width:48%;float:left;}
.custom-radio {width:100%;float:left; background:#e6e6e6;padding:5px;border-radius:5px;-webkit-border-radius:5px;-moz-border-radius:5px;position: relative;    height: 56px;}
.left-radio.yes .custom-radio{background:#aeca69;}
/* Hide the browser's default checkbox */
.r-wrap input {
    position: absolute;
    opacity: 0;
}
.left-radio.pull-right.yes .custom-radio{background:#ffc1ae;}
/* Create a custom checkbox */
.checkmark {
    position: absolute;
    top: 50%;
    left: 8px;
    height: 25px;
    width: 25px;
    background-color: #fff;
    border-radius: 50%;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
}
/* On mouse-over, add a grey background color */
.r-wrap:hover input ~ .checkmark {
    background-color: #fff;
}
/* When the checkbox is checked, add a blue background */
.r-wrap input:checked ~ .checkmark {
    /*background-color: #2196F3;*/
 
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
$('.pading-bottom .left-radio').click(function () {
            $(this).addClass('yes');
            $(this).siblings().removeClass('yes');
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Toogle Button"
Bootstrap 3.0.0 Snippet by sachin6185

Related: See More

Questions / Comments:

"Toogle Button" Bootstrap 3.0.0 Snippet by sachin6185

Related: See More

Questions / Comments:

"Toogle Button"
Bootstrap 3.0.0 Snippet by sachin6185