I want to simulate whats on this page where a user can click an a tag and move from one div with text to another.
I saw some things with hiding/showing a particular div but this particular page seems to use a href link to #next
<div class="demo__instructions" data-step="1">
....
<a href="#next" role="step" data-next="">Customize the phone menu</a>
</div>
How does one simulate this?
The next step is triggered on all links which has href value as #next.
So each time a link with href="#next" is clicked a function will execute which will take to the next step, same as simple hiding and showing.
let nextBtn = document.querySelectorAll("a[href='#next']")
let stepRunning = 1;
for (let i = 0; i < nextBtn.length; i++) {
nextBtn[i].addEventListener('click', nextBtnFunc)
}
function nextBtnFunc() {
stepRunning++;
document.querySelector("[data-step='" + stepRunning + "']").style.display = "block";
document.querySelector("[data-step='" + (stepRunning - 1) + "']").style.display = "none";
}.demo__instructions:not([data-step="1"]) {
display: none;
}<a href="#next" role="step" data-next="">Next</a>
<div>
<div class="demo__instructions" data-step="1">
<p>Step 1</p>
<a href="#next" role="step" data-next="">Customize the phone menu</a>
</div>
<div class="demo__instructions" data-step="2">
<p>Step 2</p>
<a href="#next" role="step" data-next="">phone menu</a>
</div>
<div class="demo__instructions" data-step="3">
<p>Step 3</p>
<a href="#next" role="step" data-next="">menu</a>
</div>
<div class="demo__instructions" data-step="4">
<p>Step 4</p>
</div>
</div>