Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
const $steps = $(".step"); let current = 0; function showStep(n) { $steps.hide().eq(n).show(); $("#progress").css("width", ((n + 1) / $steps.length * 100) + "%"); $("#step-label").text(`Step ${n+1} of ${$steps.length}`); } $(".next-step").on("click", function() { const $current = $steps.eq(current); const isValid = $current.find("[required]").toArray().every(el => el.checkValidity()); if (!isValid) { $current.find("input:invalid").first().focus(); return; } if (current < $steps.length - 1) showStep(++current); }); $(".prev-step").on("click", () => { if (current > 0) showStep(--current); }); showStep(0);
Result
Open