JSFiddle - React, Tailwind, and code Playground

(JQuery 1.10) Cycle through steps of a form by targeting html parent elements and applying/removing CSS classes

by Don Schaefer

HTML

<div class="divMain">
    <div id="divSub1">
        <h1>Step 1</h1>
        <p>Form Content Goes Here</p>
        <p><a href="javascript:void(0);" class="step2">Next</a></p>
    </div>
    <div id="divSub2" class="displayNone">
        <h1>Step 2</h1>
        <p>Form Content Goes Here</p>
        <p><a href="javascript:void(0);" class="step1">Previous</a></p>
        <p><a href="javascript:void(0);" class="step3">Next</a></p>
    </div>
    <div id="divSub3" class="displayNone">
        <h1>Step 3</h1>
        <p>Form Content Goes Here</p>
        <p><a href="javascript:void(0);" class="step2">Previous</a></p>
    </div>
</div>

CSS

.displayNone {
    display: none;
}

JavaScript

var $stepNum = 1;

function selectSection(){
    switch ($stepNum){
		case 1:  
            $("#divSub1").removeClass('displayNone');
			$("#divSub2").addClass('displayNone');
			$("#divSub3").addClass('displayNone');
		break;
		case 2:
			$("#divSub1").addClass('displayNone');
			$("#divSub2").removeClass('displayNone');
			$("#divSub3").addClass('displayNone');
		break;
        case 3:
			$("#divSub1").addClass('displayNone');
			$("#divSub2").addClass('displayNone');
			$("#divSub3").removeClass('displayNone');
		break;
		default:
			break;
	}
}
    
$('.step1').click(function(){
    $stepNum = 1;
    selectSection();
});
$('.step2').click(function(){
    $stepNum = 2;
    selectSection();
});
$('.step3').click(function(){
    $stepNum = 3;
    selectSection();
});