Hide/Show divs based on check box selection

Question

I want to show / hide divs based on check box selection.

here is the scenario,

• I have two check box in a div named decider ,
• selecting check box one should show Div box-one
• selecting check box two should show Div box-two

Once someone has made the selection, i want the decider div to hide. I am not being able to make this work

 $(function() { $('.decider').removeClass('hide'); $('.box-one').addClass('hide'); $("#optionTwo").click(function() { $('#optionOne').attr("checked",false); }); $("#optionOne").click(function() { $('#optionTwo').attr("checked",false); }); $("#send-decide").click(function() { if($('#optionTwo').is(':checked')){ $('.decider ').addClass('hide'); $('.box-one').removeClass('hide'); } if($('#optionOne').is(':checked')){ $('.decider ').addClass('hide'); $('.box-two').removeClass('hide'); } }); }); 

 <div class="decider hide"> <p style="font-size:10px;color:#000;">Please select an option below</p> <label class="checkbox"> <input id="optionTwo" type="checkbox" name="Request" value="Request" /> Select Box one </label> <label class="checkbox"> <input id="optionOne" type="checkbox" name="Download" value="Download" /> Select Box two </label> <br /> <span class="select"> <input type="button" id="send-decide" alt="submit" value="select" /> </span> </div> <div class="box-one"> <p>this is first box</p> </div> <div class="box-two hide"> <p>this is second box</p> </div> 

Answer 1

You are missing .hide class display:none property css.. Rest everything is fine

 $(function() { $('.decider').removeClass('hide'); $('.box-one,.box-two').addClass('hide');//add hide to both the class $("#optionTwo").click(function() { $('#optionOne').attr("checked",false); }); $("#optionOne").click(function() { $('#optionTwo').attr("checked",false); }); $("#send-decide").click(function() { if($('input[type="checkbox"]:checked').length)//check whether any checkbox is checked { //if yes go ahead and do what you wanted to do $('.decider ').addClass('hide'); //hide it in any case if($('#optionTwo').is(':checked')){ $('.box-one').removeClass('hide'); } if($('#optionOne').is(':checked')){ $('.box-two').removeClass('hide'); } } else alert('select a checkbox');//if not display some message to user }); }); 

 .hide{ display:none; //add this property } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="decider hide"> <p style="font-size:10px;color:#000;">Please select an option below</p> <label class="checkbox"> <input id="optionTwo" type="checkbox" name="Request" value="Request" /> Select Box one </label> <label class="checkbox"> <input id="optionOne" type="checkbox" name="Download" value="Download" /> Select Box two </label> <br /> <span class="select"> <input type="button" id="send-decide" alt="submit" value="select" /> </span> </div> <div class="box-one"> <p>this is first box</p> </div> <div class="box-two"> <p>this is second box</p> </div>