I need help figuring out how to change the buttons on my progress bar when users click the next button. Essentially, I want each step of the progress bar to lead to a different page with unique content - like buttons on step 1, text on step 2, and so on.
If you're having trouble visualizing what I'm talking about, check out this Codepen example that demonstrates the desired result: https://codepen.io/vajahath_ahmed/pen/xEgOdp. Notice how clicking "next" changes the displayed text; that's exactly what I'm aiming for in my project.
$(document).ready(function() {
$('.step').each(function(index, element) {
// element == this
$(element).not('.active').addClass('done');
$('.done').html('<i class="icon-ok"></i>');
if ($(this).is('.active')) {
return false;
}
});
$('.step>i.icon-ok').hide();
});
const iconClasses = ['far fa-hand-pointer', 'fas fa-mortar-pestle', 'fas fa-shipping-fast', 'fas fa-shopping-cart'];
function next() {
//console.log("Next", Math.random());
let latestActiveStep = $("div.step.active").not(".done");
let stepNumber = +$(latestActiveStep).data("stepnum");
console.log("step", stepNumber);
$(latestActiveStep).addClass("done");
$(latestActiveStep).find("i.icon-ok").toggle();
$(latestActiveStep).find("i").not(".icon-ok").toggle();
$(latestActiveStep).next().addClass("active");
}
function previous() {
//...
</body>
</html>