<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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" class="productType" name="radio" value="mobile"> <span class="checkmark"></span> </label> <label class="custom_radio">Laptop <input type="radio" class="productType" name="radio" value="laptop"> <span class="checkmark"></span> </label> <div class="mobile box">Hi I am <strong> Mobile</strong></div> <div class="laptop box">Hi I am <strong> Laptop</strong></div> </div> </div>

body{background: #3031ad; color:#ffffff;} .jumbotron{ background:transparent;} .custom_radio { display: inline-block; position: relative; padding-left: 28px; margin-right: 15px; margin-bottom: 12px; cursor: pointer; font-size: 18px; -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; } .box{ display:none; font-size:40px; } strong{color:#ffeb3b}

$(document).ready(function(){ $('.productType[type="radio"]').click(function(){ var inputValue = $(this).attr("value"); var targetBox = $("." + inputValue); $(".box").not(targetBox).hide(); $(targetBox).show(); }); });