CODEWITHSUNDEEP
javascriptjqueryformsshow-hidejquery-events
ade123
ade123

Reputation: 2833

Show/hide certain sections of a form using JavaScript. How to only show one section at a time?

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!

Upvotes: 3

Views: 3094

Answers (3)

nbrooks
nbrooks

Reputation: 18233

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();
    });
});

Upvotes: 4

David Thomas
David Thomas

Reputation: 253328

The easiest way I could think of, given your HTML:

$('input:radio').change(
    function(){
        $('.answers').slideUp();
        $(this).closest('div').next('.answers').slideDown();
    });​

JS Fiddle demo.

References:

Upvotes: 0

earthdesigner
earthdesigner

Reputation: 169

Here's how I would approach this:

Demo test: http://jsfiddle.net/earthdesigner/UYWx8/

Upvotes: 0

Related Questions