Question

I have a weird request i havent had before and im not sure how to go about it.

Basically i have an online application form, each question is contained in its own div, at first i want the first div shown and the rest of the questions to be ‘greyed’ out, then when someone clicks a radio button for the first question, the second question then ungreys itself and so on.

The code for the HTML i have so far is below, i was wondering if someone could help me out with this.

<div class="line">
    <label><span>1.</span>This is a first question?</label>
    <div class="right-box small">
        <input type="radio" name="" value=""><label style="padding-left: 3px; padding-right: 24px;">No</label><input type="radio" name="" value=""><label style="padding-left: 3px;">Yes</label>
    </div>
</div>
<div class="line">
    <label><span>2.</span>This is a second question?</label>
    <div class="right-box small">
        <input type="radio" name="" value=""><label style="padding-left: 3px; padding-right: 24px;">No</label><input type="radio" name="" value=""><label style="padding-left: 3px;">Yes</label>
    </div>
</div>

<div class="line">
    <label><span>3.</span>This is a third question?</label>
    <div class="right-box small">
        <input type="radio" name="" value=""><label style="padding-left: 3px; padding-right: 24px;">No</label><input type="radio" name="" value=""><label style="padding-left: 3px;">Yes</label>
    </div>
</div>

Answer 1

Use Jquery and a combination of show / hide or adding and removing disabled attributes.

Show / hide:

$('.line').show(); // would show all
$('.line').hide(); // would hide all

$('#yourId').show(); // would show one element
$('#yourId').hide(); // would hide one element

Disabled / enabled:

$('#yourId').attr('disabled',true); // would disable
$('#yourId')..removeAttr('disabled'); // would enable

Click event:

$('#yourId').click(function() {
  // Do action for the clicked input show next element, enabled etc
});

Opacity to a div:

$("#yourId").css({ opacity: 0.5 });

This should give you an idea of how to go about this. Hope it helps