Bootstrap Snippet Toggle Button using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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="container">
    <div class="row">
        <div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" id="option1" autocomplete="off" checked> Radio 1 (preselected)
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2" autocomplete="off"> Radio 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> Radio 3
  </label>
</div>
<div class="show-hide">
    <p>I am some div</p>
</div>
    </div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
.show-hide{
    display: none;
    width: 100px;
    padding:15px;
    border: 1px solid #000;
    }
    
    .active{
        background: green !important;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
$(document).ready(function(){
$this = $(this);
$('input[type=radio]').change(function(){
   
if($('#option2').is(':checked')){
     //alert('hi')
     $('.show-hide').fadeIn('slow');
 } else{
    $('.show-hide').fadeOut('slow'); 
 }
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Toggle Button"
Bootstrap 3.3.0 Snippet by amitabha197

Related: See More

Questions / Comments:

"Toggle Button" Bootstrap 3.3.0 Snippet by amitabha197

Related: See More

Questions / Comments:

"Toggle Button"
Bootstrap 3.3.0 Snippet by amitabha197