I would like to get some opinions or ideas regarding showing small portions of a lengthy form and advancing through the form by hide() and show().
Below is what I have done, is there an easier or more standard way to do this? Currently I have divided the sections up by fieldsets and using jquery like so: var $totalSets = $('form').find('fieldset').length; $('fieldset').each(function(index) { if(index ==0) { $('<div class="control"><span class="next"><img alt="'+index+'" src="..\/img\/bgs\/nav_right_green.jpg"\/> Click to Continue<\/span><\/ div>') .insertBefore('span.set'+index); } if(index !=0) { $('<div class="control"><span class="back"><img alt="'+index+'" src="..\/img\/bgs\/nav_left_green.jpg"\/> Click to Go Back<\/span> <span class="next"><img alt="'+index+'" src="..\/img\/bgs\/ nav_right_green.jpg"\/> Click to Continue<\/span><\/div>') .insertBefore('span.set'+index); } if(index == $totalSets-1) { $('<div class="control"><span class="back"><img alt="'+index+'" src="..\/img\/bgs\/nav_left_green.jpg"\/> Click to Go Back<\/span> <span class="save"><img src="..\/img\/bgs\/disk_green.jpg" alt="Click to Save" \/> Click to Save and Return Later<\/span><\/div>') .insertBefore('input#submit'); } }); $('fieldset').hide(); $('span#TTother').hide(); var set1 = $('fieldset').get([0]); $(set1).show(); $('span.next').click(function() { var fIndex = $(this).children('img').attr('alt'); var curSet = $('fieldset')[fIndex]; var nextSet = $('fieldset')[++fIndex]; $(curSet).hide('slow'); $(nextSet).show('slow'); }); $('span.back').click(function() { var fIndex = $(this).children('img').attr('alt'); var curSet = $('fieldset')[fIndex]; var prevSet = $('fieldset')[--fIndex]; $(curSet).hide('slow'); $(prevSet).show('slow'); }); $('input.possTitleOther').click(function() { var titleOther = $('span#TTother'); $(titleOther).show('slow'); }); $('input.possTypeNormal').click(function() { var titleOther = $('span#TTother'); $(titleOther).hide('slow'); });