Radio button clicked to slide & show hidden div & pass a value

Question

I'm trying to mimic the function on this url: https://www.healthcare.gov/find-premium-estimates/

I've provided a link and the code to what I have so far. I'm trying to create the same feature of the site like when you click an answer to the provided questions it then slides you down to the next question...

One issue I'm having with my jsfiddle example is if you click "No" on Question 2 it won't show the hidden div but, if you click "Yes" on the same question it then works... This also happens to question 3 if you click the "Don't Know".

Here is what I have: http://jsfiddle.net/0vc9ep17/34/

Here is the HTML

    <h1>Question 1</h1>
    <input type="radio" name="question1" value="answer1">
    Answer 1
    <input type="radio" name="question1" value="answer2">
    Answer 2
    <div class="answer1and2 hide">
    <h1>Question 2</h1>
    <input type="radio" name="question2" value="answer3">
    Yes
    <input type="radio" name="question2" value="answer4">
    No
    </div>
<div class="answer3 hide">
        <h1>Question 3</h1>
        <input type="radio" name="question3" value="answer5">
            maybe
        <input type="radio" name="question3" value="answer6">
            Don't know
            </div>
<div class="answer5 hide">
        <h1>Question 4</h1>
        <input type="radio" name="question4" value="answer7">
            maybe
        <input type="radio" name="question4" value="answer8">
            Don't know
            </div>

Here is the Javascript

 jQuery(document).ready(function () {
     jQuery('input[type="radio"]').click(function () {
         if (jQuery(this).attr("value") == "answer1") {
             jQuery(".answer1").show("slow");
             jQuery(".answer1and2").show("slow");
         }
         if (jQuery(this).attr("value") == "answer2") {
             jQuery(".answer2").show("slow");
             jQuery(".answer1and2").show("slow");
         }
         if (jQuery(this).attr("value") == "answer3") {
             jQuery(".answer3").show("slow");
             jQuery(".answer4").show("slow");
             jQuery(".answer1and2").show("slow");
         }
         if (jQuery(this).attr("value") == "answer5") {
             jQuery(".answer1and2").show("slow");             
             jQuery(".answer3").show("slow");
             jQuery(".answer4").show("slow");
             jQuery(".answer5").show("slow");

         }

     });
 });

Here is the CSS

.hide {
    display: none;
}

Thanks for any help!

Answer 1

With changing <div class="answer1and2 hide"> to <div class="answer1 answer2 hide"> code can be simplified and can cover all cases:

Fiddle .

jQuery(document).ready(function()
{
    jQuery('input[type="radio"]').click(function()
    {
        jQuery("." + this.value).show("slow");
    });
});

If you want to scroll to shown question, you can use $(window).scrollTop() with shown question .offset() after .show() is done:

Fiddle .

jQuery(document).ready(function()
{
    jQuery('input[type="radio"]').click(function()
    {
        var showingElement = jQuery("." + this.value);
        showingElement.show("slow", function()
        {
            jQuery(window).scrollTop(showingElement.offset().top); 
        });
    });
});

Note: to make scroll work correctly page height has to be more than window height.

Answer 2

You need to add a trigger for the events that arent firing, just like you have for the rest of them.

if (jQuery(this).attr("value") == "answer4") {
         jQuery(".answer3").show("slow");
         jQuery(".answer4").show("slow");
         jQuery(".answer1and2").show("slow");
     }

if (jQuery(this).attr("value") == "answer6") {
             jQuery(".answer1and2").show("slow");             
             jQuery(".answer3").show("slow");
             jQuery(".answer4").show("slow");
             jQuery(".answer5").show("slow");

         }`