JQuery can .hide() div but can't .show()

Question

I currently have a simple web page with a question and a bunch of radio buttons. Based on the users choice of radio buttons, it'll hide the question and display a correct message or incorrect message, which are hidden.

It works with JQuery on the form submit event, it should hide the question, see which radio button was checked and .show() the appropriate div. The problem is everything is hidden ok, but it won't show. I've even tried swapping around to debug sort of, and the works the opposite way wrong, will hide the elements when form submit. Any ideas to why?

Code is below;

 $(document).ready(function(){ $('#passed').hide(); $('#allGo').hide(); $("#onlyPhilip").hide(); $("#nobodyGoes").hide(); $("#carBoatForm").submit(function(e){ e.preventDefault(); $("#question").hide(); if($('#withoutMark').is(':checked')){ $('#passed').show(); } else if($('#theyAllGo').is(':checked')){ $('allGo').show(); } else if ($('#onlyPhilipGoes').is(':checked')) { $('#onlyPhilip').show(); } else if ($('#nobodyCanGo').is(':checked')) { $('#nobodyGoes').show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row" id="question"> <div class="col-md-8 col-md-offset-3"> <h2 class="challengeTitle">Challenge 2</h2> <h3 class="challengeHeading">The Big IF!</h3> <p class="challengeText">Philip and Susan are taking a trip by boat. The boat's rules are that a cars total weight must be below 2066kg. <br>Philip's car weighs 1865kg <br>Philip weighs 75kg <br>Susan weighs 50kg <br>Then their friend Mark asks if he can come along. Mark weights 67kg.</p> <p class="challengeText">Which of the following statements are true?</p> <form id="carBoatForm"> <input type="radio" name="boatAnswer" id="theyAllGo"> They can all go on the trip <br> <input type="radio" name="boatAnswer" id="onlyPhilipGoes"> Only Philip can go on the trip <br> <input type="radio" name="boatAnswer" id="withoutMark"> Philip and Susan can go, but Mark cannot <br> <input type="radio" name="boatAnswer" id="nobodyCanGo"> Nobody can go <br> <input type="submit" value="Enter"> </form> </div><!--End Content Section --> <div class="row"> <div class="col-md-8 col-md-offset-4"> <div id="passed"> <h2>Good Job!</h2> <h3>Philip and Susan can go on the trip, but sadly Mark would put the total weight over by 1kg, so he cannot come along.</h3> <button type="button" class="btn btn-primary"> Continue </button> </div> <div id="onlyPhilip"> <h2> Close but nope!</h2> <h3>Although it is true that Philip could go on his own, the trip isn't restricted to only Philip being able to go.</h3> <button type="button" class="btn btn-primary"> Try Again </button> </div> <div id="allGo"> <h2> Sorry this is wrong!</h2> <h3>Try again focusing on the weights. Can they all definitely go on? Remember the boat checks the total weight of a car.</h3> <button type="button" class="btn btn-primary"> Try Again </button> </div> <div id="nobodyGoes"> <h2> Incorrect!</h2> <h3>Sure nobody has to go on the trip, but where's the fun in that! Try again, this time maybe let some people have fun.</h3> <button type="button" class="btn btn-primary"> Try Again </button> </div> </div> </div><!--End Section --> 

Answer 1

You're hiding #question , which wraps the questions and answers. Move id="question" to the row that holds the questions. You were also missing the # in $('#allGo').show();

 $(document).ready(function(){ $('#passed').hide(); $('#allGo').hide(); $("#onlyPhilip").hide(); $("#nobodyGoes").hide(); $("#carBoatForm").submit(function(e){ e.preventDefault(); $("#question").hide(); if($('#withoutMark').is(':checked')){ $('#passed').show(); } else if($('#theyAllGo').is(':checked')){ $('#allGo').show(); } else if ($('#onlyPhilipGoes').is(':checked')) { $('#onlyPhilip').show(); } else if ($('#nobodyCanGo').is(':checked')) { $('#nobodyGoes').show(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="row"> <div class="col-md-8 col-md-offset-3" id="question"> <h2 class="challengeTitle">Challenge 2</h2> <h3 class="challengeHeading">The Big IF!</h3> <p class="challengeText">Philip and Susan are taking a trip by boat. The boat's rules are that a cars total weight must be below 2066kg. <br>Philip's car weighs 1865kg <br>Philip weighs 75kg <br>Susan weighs 50kg <br>Then their friend Mark asks if he can come along. Mark weights 67kg.</p> <p class="challengeText">Which of the following statements are true?</p> <form id="carBoatForm"> <input type="radio" name="boatAnswer" id="theyAllGo"> They can all go on the trip <br> <input type="radio" name="boatAnswer" id="onlyPhilipGoes"> Only Philip can go on the trip <br> <input type="radio" name="boatAnswer" id="withoutMark"> Philip and Susan can go, but Mark cannot <br> <input type="radio" name="boatAnswer" id="nobodyCanGo"> Nobody can go <br> <input type="submit" value="Enter"> </form> </div><!--End Content Section --> <div class="row"> <div class="col-md-8 col-md-offset-4"> <div id="passed"> <h2>Good Job!</h2> <h3>Philip and Susan can go on the trip, but sadly Mark would put the total weight over by 1kg, so he cannot come along.</h3> <button type="button" class="btn btn-primary"> Continue </button> </div> <div id="onlyPhilip"> <h2> Close but nope!</h2> <h3>Although it is true that Philip could go on his own, the trip isn't restricted to only Philip being able to go.</h3> <button type="button" class="btn btn-primary"> Try Again </button> </div> <div id="allGo"> <h2> Sorry this is wrong!</h2> <h3>Try again focusing on the weights. Can they all definitely go on? Remember the boat checks the total weight of a car.</h3> <button type="button" class="btn btn-primary"> Try Again </button> </div> <div id="nobodyGoes"> <h2> Incorrect!</h2> <h3>Sure nobody has to go on the trip, but where's the fun in that! Try again, this time maybe let some people have fun.</h3> <button type="button" class="btn btn-primary"> Try Again </button> </div> </div> </div><!--End Section -->