<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="row"> <div class="col-sm-12" align="center"> <form id='form-id'> <input id='watch-me' name='test' type='radio' checked /> Radio 1 <input id='see-me' name='test' type='radio' /> Radio 2 <input id='look-me' name='test' type='radio' /> Radio 3 </form> <br><br> <div id='show-me'> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li> <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li> <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li> <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="home">Home Tab Content</div> <div role="tabpanel" class="tab-pane" id="profile">Profile Tab Content</div> <div role="tabpanel" class="tab-pane" id="messages">Messages tab Content</div> <div role="tabpanel" class="tab-pane" id="settings">Setting tab Content</div> </div> </div> <div id='show-me-two' style='display:none; border:2px solid #ccc'>Editing snippet "On Click Change on Radio Button" <br> Editing snippet "On Click Change on Radio Button"</div> <div id='show-me-three' style='display:none; border:2px solid #ccc'>Hello I'm Div 3</div> </div> </div>

$(document).ready(function () { $("#watch-me").click(function() { $("#show-me:hidden").show('slow'); $("#show-me-two").hide(); $("#show-me-three").hide(); }); $("#watch-me").click(function() { if($('watch-me').prop('checked')===false) { $('#show-me').hide(); } }); $("#see-me").click(function() { $("#show-me-two:hidden").show('slow'); $("#show-me").hide(); $("#show-me-three").hide(); }); $("#see-me").click(function() { if($('see-me-two').prop('checked')===false) { $('#show-me-two').hide(); } }); $("#look-me").click(function() { $("#show-me-three:hidden").show('slow'); $("#show-me").hide(); $("#show-me-two").hide(); }); $("#look-me").click(function() { if($('see-me-three').prop('checked')===false) { $('#show-me-three').hide(); } }); });