JSFiddle - React, Tailwind, and code Playground

by Don Schaefer

HTML

<div class="divMain">
    <div id="divSub1">
        <h1>SubSection 1</h1>
        <p><a href="" onclick="selectSection(2);">Next</a></p>
    </div>
    <div id="divSub2" class="displayNone">
        <h1>SubSection 2</h1>
        <p><a href="" onclick="selectSection(1);">Previous</a></p>
        <p><a href="" onclick="selectSection(3);">Next</a></p>
    </div>
    <div id="divSub3" class="displayNone">
        <h1>SubSection 3</h1>
        <p><a href="" onclick="selectSection(2);">Previous</a></p>
    </div>
</div>

CSS

.displayNone {
    display: none;
}

JavaScript

function selectSection(n){	
	switch (n){
		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;
	}
}