How to hide one div then render the next div in the same page with href?

Question

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?

Answer 1

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>