Javascript hide-show text on link click?

Question

JavaScript

There are 3 link buttons with different id, there should be a list in the form of text (li) under the links . Interested in javascript, not jquery

Answer 1

<div class="btn">
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
</div>

<ul class="list" data-id="1">
<li>...</li>
</ul>
<ul class="list" data-id="2">
<li>...</li>
</ul>
<ul class="list" data-id="3">
<li>...</li>
</ul>

window.onload = function () {


  let btnGroup = document.querySelector(".btn");
  let lists = document.querySelectorAll(".list");

  btnGroup.addEventListener("click", function(e){
  e.preventDefault();

  [].slice.call(lists).forEach(function(it){
    it.classList.add("hide");
  })

  let id = e.target.id;
  let ul = document.querySelector('[data-id="'+id+'"]');

    ul.classList.remove('hide');
  });
}

Answer 2

set an attribute with the link id to the lists, and access this attribute when clicked