<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>

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; } /* On mouse-over, add a grey background color */ .custom_radio:hover input ~ .checkmark { background-color: #ccc; } /* When the radio button is checked, add a blue background */ .custom_radio input:checked ~ .checkmark { background-color: #eeeeee; } /* Create the indicator (the dot/circle - hidden when not checked) */ .checkmark:after { content: ""; position: absolute; display: none; } /* Show the indicator (dot/circle) when checked */ .custom_radio input:checked ~ .checkmark:after { display: block; } /* Style the indicator (dot/circle) */ .custom_radio .checkmark:after { top:4px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background: #E91E63; } .show{ display:block} .hidden{ display:none} #item1, #item2{ padding:30px; color:#ffffff; font-size:20px;} #item1{background:linear-gradient(45deg, #9C27B0, #3F51B5);} #item2{background:linear-gradient(45deg, #3F51B5, #009688);}

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"; } }