Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
$.fn.wizard = function(opts = {}) { return this.each(function() { const $w = $(this); const $steps = $w.find(".wiz-step"); let cur = opts.start || 0; function render() { $steps.hide().eq(cur).show(); $w.find(".wiz-progress").css("width", ((cur+1)/$steps.length*100)+"%"); $w.trigger("wizard:step", [cur, $steps.length]); } $w.on("click",".wiz-next",() => { if (cur < $steps.length-1) { cur++; render(); } }); $w.on("click",".wiz-prev",() => { if (cur > 0) { cur--; render(); } }); $w.data("wizard", { goTo: n => { cur=n; render(); } }); render(); }); }; $("#onboarding").wizard({ start: 0 });
Result
Open