Overlay blocks in a multi-part form

Question

I've a form with three sections, markup looks something like this:

div.section1
 legend
 fieldset
 button.continue

div.section2
 legend
 fieldset
 button.continue

div.section3
 legend
 fieldset
 button.continue

I'd like to have a white overlay on section 2 and 3 so they appear as 'disabled' when the user is still on section 1. When done with section 1 and clicked on continue, the other section appears.

Many thanks!

Answer 1

Then do just that :)

Nest each div inside a "container div" with a z-index of say 100 and opacity of 0.3;

//make all overlays opacity=0.3
$.each($("div.overlay"),function(i,val){ 
    $(this).css('opacity', 0.3);   
});

<div id="section1" class="overlay" style="z-index:100;" >
     <div id="YOURSECTION HERE"></div>
</div>
<div id="section2" class="overlay" style="z-index:100;" >
     <div id="YOURSECTION HERE"></div>
</div>
<div id="section3" class="overlay" style="z-index:100;" >
     <div id="YOURSECTION HERE"></div>
</div>

Then i would make a function that disables or enables certain section on the click event of the continue button - something like:

function ChangeOverlay(oldOverlayID,newOverlayID)
{
    //disable old section
    $("#" + oldOverlayID).css('z-index') = 100;
    $("#" + oldOverlayID).css('opacity') = 0.3;
    //enable new section
    $("#" + newOverlayID).css('z-index') = -1;
    $("#" + newOverlayID).css('opacity') = 1;
}

Something like that :)