nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Child Item

Best method of implementing a wizard using jQuery / Javascript

Danger781

Hello all,

Just geting familiar with Javascript and jQuery over the last few days. I'm planning on putting together a web page that will include a GUI-like wizard. What would be the best method of implementing something like this?

Would it be something along the lines of..
$("nextButton").click( function() {

$("sectOne").html( ... )

$("sectTwo").html( ... )

});

Am I going about this the wrong way / too literally?

Find more posts tagged with

Quick Links

Comments

Danger781

Danger781 wrote: »

Hello all,

Just geting familiar with Javascript and jQuery over the last few days. I'm planning on putting together a web page that will include a GUI-like wizard. What would be the best method of implementing something like this?

Would it be something along the lines of..
$("nextButton").click( function() {
$("sectOne").html( ... )

$("sectTwo").html( ... )
});

Am I going about this the wrong way / too literally?

Looked up some basic wizard examples and some posts on stack overflow. Seems like the best implementation would be dividing the entire form into sections and then using show() and hide() as needed.

Ill probably go with this method unless someone else has a more intelligent alternative.

Buford T Justice

a bit more information would help, but failing that http://www.jquery-steps.com/

Giblet

Use CSS and the :target selector along with anchors, could be a nice JavaScript free alternative. Can animate in CSS as well as use the back button

<style>
    .step { max-height:0; overflow-y:hidden; opacity:0; transform; transition: opacity .15s ease-in-out  }   
    .step:target {  max-height:100%; overflow-y:visible; opacity:1;  }
</style>
<a href="#Step1"> Start Wizard! </a>
<div id="Step1" class="step">
   <p>This is step 1</p>
   <a href="#Step2">Next</a>
</div>
<div id="Step2" class="step">
   <p>This is step 2</p>
   <a href="#Step1">Prev</a>
   <a href="#Step3">Next</a>
</div>
<div id="Step3" class="step">
   <p>This is step 3</p>
   <a href="#Step2">Prev</a>
</div>

Danger781

Buford T Justice wrote: »

a bit more information would help, but failing that http://www.jquery-steps.com/

Came across that library alright but I'm doing this as a learning experience - So I'd like to do it all myself. Thanks for the suggestion though!

Giblet wrote: »

Use CSS and the :target selector along with anchors, could be a nice JavaScript free alternative. Can animate in CSS as well as use the back button

Definitely an option, thanks. Like I said above I am doing this more as a learning experience so ideally I would use JS / jQuery but I guess I could try both and decide which implementation I prefer.

On that note is there any disadvantage to using JS over CSS for something like this? I would imagine 99% of people have Javascript enabled in their web browser nowadays..

Talisman

Take a look at the FormWizard jQuery plugin.

https://github.com/thecodemine/formwizard