jQuery UI is a great choice to kill as many birds as possible with a single Javascript stone. Creating a stepped horizontal input process sounds like you need tabs. There are many jQuery tab plugins, but I have the most cross browser with the jQuery user interface, although design changes can be more complicated because the themeroller is a bit used.
This article has a good illustration of how tabs can be used to create a multi-stage form. http://pathfindersoftware.com/2008/03/jquery-form-and/
From a DOM point of view, I would recommend using DIVs as content containers, because you can place them anyway you want, and it’s easy to change the layout for different devices and discover features like moderinzr. You can include tables inside the DIV whenever you want. Many people insist on using HTML5 containers, such as a section and a title, but you will find that they will start working quickly in older browsers.
The following is an overview of how you can organize your page and sample jquery to show you how to switch custom options, which may include images, video, text, or whatever you want to display. You can even make a list of available options, and then hide them using CSS and display only those elements when the appropriate form values were selected.
One note is to remember the concept of id versus classes. The identifier must be a unique identifier, that is, it must exist only once for the DOM. In CSS and jQuery IDs have a prefix with a hash or pound symbol (#myID). Classes can exist several times in the DOM and have a period prefix (.myClass).
<div id="selectedValues"> <p>Your progress:</p> <ul id="userSelections"> <li><a rel="one" class="option remove">Option 1</a></li> </ul> </div> <form id="tabbedForm"> <div id="tabs"> <ul> <li><a href="#tabs-1">First Choice</a></li> <li><a href="#tabs-2">Second Choice</a></li> <li><a href="#tabs-3">Third Choice</a></li> </ul> <div id="tabs-1"> <h2>First Choice Form Elements</h2> <a rel="one" class="option remove">Option 1</a> <a class="next" href="#">Next</a> </div> <div id="tabs-2"> <h2>Second Choice Form Elements</h2> <a rel="two" class="option add">Option 2</a> <a class="next" href="#">Next</a> </div> <div id="tabs-3"> <h2>Third Choice Form Elements</h2> <a rel="three" class="option add">Option 3</a> <input type="submit" value="Submit Form"> </div> </div> </div>
After you participate more in jQuery, you can add and remove items from the list on the same page to show the user that the options have been selected or deleted. The live () function allows jQuery to track dynamic elements on a page that did not exist in the DOM when rendering the page.
// Basic jquery to show what the user has selected with animation $('.option').live('click', function(event) { event.preventDefault(); // Get option/value/offering/product id, which can be stored in element attribute like rel var id = $(this).attr("rel"); if( $(this).hasClass("remove") ){ // Remove option $("#userSelections a[rel='"+ id +"']").fadeOut("fast"); $("#userSelections a[rel='"+ id +"']").remove(); // toggle class in the options list $("a[rel='"+ id +"']").toggleClass('add'); $("a[rel='"+ id +"']").toggleClass('remove'); } else { // Add option $(this).clone().appendTo("#userSelections").append('<li>'); } });