Question

I have the following for set-up:

<form action="?" method="post" name="contactform">

<div class="question">
    <p><span><input type="radio" name="answer" value="Yes" onclick="showHide('one')"/></span> Yes</p>
</div>
<div id="one" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="No" onclick="showHide('two')"/></span> No</p>
</div>
<div id="two" class="answers" style="display:none">
    <p><input type="radio" name="answerdetail" value="Reason One" /> Reason One</p>
    <p><input type="radio" name="answerdetail" value="Reason Two" /> Reason Two</p>
    <p><input type="radio" name="answerdetail" value="Reason Three" /> Reason Three</p>
    <p><input type="radio" name="answerdetail" value="Reason Four" /> Reason Four</p>
</div><!-- end answers -->

<div class="question">
    <p><span><input type="radio" name="answer" value="Not sure" /></span> Not sure</p>
</div>

When you first see the form there are only 3 check boxes visible (Yes, No, Not Sure). When you click ‘Yes’, the sub checkboxes for ‘Yes’ appear and if you click ‘No’, the sub checkboxes for ‘No’ appear.

I would like to know if it is possible to only show one set of sub checkboxes at a time?

I.e. if somebody checks ‘Yes’ the sub checkboxes for ‘Yes’ appear. If they then change their mind and click ‘No’ the sub checkboxes for ‘Yes’ disappear and the sub checkboxes for ‘No’ appear (i.e. only one set of sub checkboxes is ever visible at any one time).

I hope this makes sense.

Any help would be greatly appreciated!

Answer 1

jQuery has several built in methods which should be useful for this. You can use .hide()/.show() to toggle the visibility of the elements. You can target the correct answer section using .next(). Furthermore, to handle the ‘change’ event, you can use .change(), which will fire the handler every time the user selects a different option:

$(document).ready(function() {
    $('input[name="answer"]').change(function() {
        $(".answers").hide();
        $('input[name="answer"]:checked')
            .closest(".question")
            .next(".answers")
            .show();
    });
});