JQuery hide/show divs in questionnaire [closed]

It's difficult to tell what is being asked here. This question is ambiguous, vague, incomplete, overly broad, or rhetorical and cannot be reasonably answered in its current form. For help clarifying this question so that it can be reopened, visit the help center. Closed 10 years ago.

I'm designing a questionnaire that asks a series of questions using radio buttons and check boxes. I'd like to use jQuery to reveal the questions in small chunks rather than display several questions all at once.

Here is what I have so far:

<p>
    1a. Has this happened to you? <label><input id="radio1" type="radio" name="toggler" value="1" />Yes </label>
    <label><input id="radio2" type="radio" name="toggler" value="2" />No </label>
</p>

<div id="blk-2" class="toHide" style="display:none"> <!-- 1a. Choice: No -->
    <form name="form1" method="post" action="nextPage.html">
        <input type="submit" name="Submit" value="Continue"><br /><br />
    </form>
</div>

<div id="blk-1" class="toHide" style="display:none"> <!-- 1a. Choice: Yes -->
<p>
    1b. How often has this happened to you? 
</p>
<p><input type="radio" name="how_often" value="day" /> one of more times a day</p>
<p><input type="radio" name="how_often" value="week" /> one of more times a week</p>
<p><input type="radio" name="how_often" value="month" /> one of more times a month</p>
    <!-- Display "reveal more" button after one of the "how_often" buttons is selected -->
<input type="submit" name="Submit" value="reveal more"><br /><br />
</div><!-- /blk-1 -->




<div id="02a_part1_question" style="display:none">
<p>
    2a. Where has this happened to you? 
</p>
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>homeroom</td>
            <td><input type="radio" name="homeroom" value="Yes" /></td>
            <td><input type="radio" name="homeroom" value="No" /></td>
        </tr>
        <tr>
            <td>cafeteria</td>
            <td><input type="radio" name="cafeteria" value="Yes" /></td>
            <td><input type="radio" name="cafeteria" value="No" /></td>
        </tr>
        <tr>
            <td>academic class</td>
            <td><input type="radio" name="academic_class" value="Yes" /></td>
            <td><input type="radio" name="academic_class" value="No" /></td>
        </tr>
        <tr>
            <td>before school</td>
            <td><input type="radio" name="before_school" value="Yes" /></td>
            <td><input type="radio" name="before_school" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part1_question -->

<div id="02a_part2_question" style="display:none">
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>bus</td>
            <td><input type="radio" name="bus" value="Yes" /></td>
            <td><input type="radio" name="bus" value="No" /></td>
        </tr>
        <tr>
            <td>after school</td>
            <td><input type="radio" name="after_school" value="Yes" /></td>
            <td><input type="radio" name="after_school" value="No" /></td>
        </tr>
        <tr>
            <td>gym</td>
            <td><input type="radio" name="gym" value="Yes" /></td>
            <td><input type="radio" name="gym" value="No" /></td>
        </tr>
        <tr>
            <td>dances</td>
            <td><input type="radio" name="dances" value="Yes" /></td>
            <td><input type="radio" name="dances" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part2_question -->

<div id="02a_part3_question" style="display:none">
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>hallway</td>
            <td><input type="radio" name="hallway" value="Yes" /></td>
            <td><input type="radio" name="hallway" value="No" /></td>
        </tr>
        <tr>
            <td>sporting events</td>
            <td><input type="radio" name="sporting_events" value="Yes" /></td>
            <td><input type="radio" name="sporting_events" value="No" /></td>
        </tr>
        <tr>
            <td>bathroom</td>
            <td><input type="radio" name="bathroom" value="Yes" /></td>
            <td><input type="radio" name="bathroom" value="No" /></td>
        </tr>
        <tr>
            <td>telephone</td>
            <td><input type="radio" name="telephone" value="Yes" /></td>
            <td><input type="radio" name="telephone" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part3_question -->

<div id="02a_part4_question" style="display:none">
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>online/texting during school</td>
            <td><input type="radio" name="texting_dur_school" value="Yes" /></td>
            <td><input type="radio" name="texting_dur_school" value="No" /></td>
        </tr>
        <tr>
            <td开发者_如何学Go>online/texting outside of school</td>
            <td><input type="radio" name="texting_out_school" value="Yes" /></td>
            <td><input type="radio" name="texting_out_school" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02a_part4_question -->




<div id="02b_part1_question" style="display:none">
<p>
    2b. Identify the online/texting programs where this has occured. (This choice will appear if "online/texting during school" or "online/texting outside of school" was selected in 2a.) 
</p>
    <table>
        <tr>
            <td></td>
            <td><strong>Yes</strong></td>
            <td><strong>No</strong></td>
        </tr>
        <tr>
            <td>Facebook</td>
            <td><input type="radio" name="Facebook" value="Yes" /></td>
            <td><input type="radio" name="Facebook" value="No" /></td>
        </tr>
        <tr>
            <td>Twitter</td>
            <td><input type="radio" name="Twitter" value="Yes" /></td>
            <td><input type="radio" name="Twitter" value="No" /></td>
        </tr>
        <tr>
            <td>IMing</td>
            <td><input type="radio" name="IMing" value="Yes" /></td>
            <td><input type="radio" name="IMing" value="No" /></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="radio" name="Email" value="Yes" /></td>
            <td><input type="radio" name="Email" value="No" /></td>
        </tr>
        <tr>
            <td>Myspace</td>
            <td><input type="radio" name="Myspace" value="Yes" /></td>
            <td><input type="radio" name="Myspace" value="No" /></td>
        </tr>
        <tr>
            <td>Texting</td>
            <td><input type="radio" name="Texting" value="Yes" /></td>
            <td><input type="radio" name="Texting" value="No" /></td>
        </tr>
        <tr>
            <td>Online Gaming</td>
            <td><input type="radio" name="Online_Gaming" value="Yes" /></td>
            <td><input type="radio" name="Online_Gaming" value="No" /></td>
        </tr>
    </table>
    <input value="reveal more" type="submit"><br /><br />
</div><!-- /02b_part1_question -->





<div id="02c_question" style="display:none">
<p>
    2c. Click on the ONE place where this has happened the most. 
    <br />
    (This section appears with items that were marked YES from 2a.) 
</p>
    <table>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="radio" name="2c" value="(name)" /> item selected from 2a if necessary</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="checkbox27" value="checkbox"> etc.</td>
        </tr>
    </table>
    <input value="Continue" type="submit"><br /><br />
</div><!-- /02c_question -->

Here's the javascript:

$(document).ready(function() {

    $(function() {
        $("[name=toggler]").click(function() {
            $('.toHide').hide();
            $("#blk-" + $(this).val()).toggle();
        });
    });

    $(':submit').click(function() {
        $('#02a_part1_question').show();
        $('#02a_part2_question').show();
        $('#02a_part3_question').show();
        $('#02a_part4_question').show();
        $('#02b_question').show();
        $('#02c_question').show();
    });

});

The first part (1a) works, but I can't seem to display the rest of the sections correctly.

Any help would be appreciated. Although it's not working correctly, I've posted it here http://jsfiddle.net/mrfisherman2010/xM6Ft/1/

---

try to add a class, for example current, for the first div you want to show. When you show it, remove the class and add it in the next div. An example code:

 $('.current').show();
 $('.current').removeClass('current').next("div").addClass('current');

Demo: http://jsfiddle.net/xM6Ft/2/

Update

To hide the previous div you can change the first line to:

$('.current').show().prev("div").hide();

Demo: http://jsfiddle.net/xM6Ft/4/

---

In your ready function, you bind a click handler to [name=toggler]. At page load though, there are only 2 inputs with that name though (the ones for 1a), so hence when you click one of the radio buttons in 1b nothing is happening. I'd suggest adding the same class to all of your inputs on the page (e.g. class="toggler") then change your ready function to

$(".toggler").click(function() {
  //...
});