<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 id="qablock"> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary" id="basepanel1"> <div class="panel-heading"> </div> <div class="panel-body"> <p id="basequestion">question</p> <div class="radio"> <label> <input type="radio" id="a1" name="g1" value="option1">a1 </label> </div> <div class="radio"> <label> <input type="radio" id="a2" name="g1" value="option1">a2 </label> </div> </div> </div> </div> </div> <div id="qablock_for_a1"> <div class="row"> <div class="col-md-6"> <div class="panel panel-primary" id="basepanel1"> <div class="panel-heading"> </div> <div class="panel-body"> <p>question for a1</p> <div class="radio"> <label> <input type="radio" id="a11" name="g2" value="option1">a11 </label> </div> <div class="radio"> <label> <input type="radio" id="a12" name="g2" value="option1">a12 </label> </div> </div> </div> </div> </div> </div> <div id="qablock_for_a2"> <div class="row" name="childqa2"> <div class="col-md-6"> <div class="panel panel-primary" id="basepanel1"> <div class="panel-heading"> </div> <div class="panel-body"> <p>question for a2</p> <div class="radio"> <label> <input type="radio" id="a21" name="g3" value="option1">a21 </label> </div> <div class="radio"> <label> <input type="radio" id="a22" name="g3" value="option1">a22</label> </div> </div> </div> </div> </div> </div> </div> </div>

$(document).ready(function(){ $('input[type="radio"]').click(function(){ $(this).closest("#qablock").children("[id^=qablock_for]").hide() var blockname = "#qablock_for_" + $(this).attr("id"); if ( $(blockname).length ) { $(blockname).show(); } }); });