Bootstrap Snippet Show/Hide Div on customized radio 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
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="jumbotron text-center">
<label class="custom_radio">Mobile 
  <input type="radio" name="radio" onclick="toggle('item1')">
  <span class="checkmark"></span>
</label>
<label class="custom_radio">Laptop 
  <input type="radio" name="radio" onclick="toggle('item2')">
  <span class="checkmark"></span>
</label>
<div class="hidden" id="item1">Mobile</div>
<div class="hidden" id="item2">Laptop</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
body{
    background:linear-gradient(45deg, #9C27B0, #3F51B5);
    
}
.jumbotron{ margin-top:30px;}
.custom_radio {
  display: inline-block;
  position: relative;
  padding-left: 28px;
  margin-right: 15px;
  margin-bottom: 12px;
  cursor: pointer;
  font-size: 22px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* Hide the browser's default radio button */
.custom_radio input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #eee;
    border-radius: 50%;
    border: 1px solid #dddddd;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
var item1 = document.getElementById(item1).value;
var item2 = document.getElementById(item2).value;
function toggle(temp){
    if(temp=='item1'){      
        document.getElementById("item1").className = "show";
        document.getElementById("item2").className = "hidden";
    }else if(temp=='item2'){        
        document.getElementById("item2").className = "show";
        document.getElementById("item1").className = "hidden";
    }   
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Show/Hide Div on customized radio button"
Bootstrap 3.3.0 Snippet by subhash4web

Related: See More

Questions / Comments:

"Show/Hide Div on customized radio button" Bootstrap 3.3.0 Snippet by subhash4web

Related: See More

Questions / Comments:

"Show/Hide Div on customized radio button"
Bootstrap 3.3.0 Snippet by subhash4web