Javascript tabs with hash links – Blancer.com Tutorials and projects

I have 5 tabs that reveal different content. When you click a tab, it should open that tab only and add the hash/id of that “tab” to the URL so a user could copy the URL and use it to go directly to that tab later. External and internal links with hashes should behave the same way –open/reveal that particular tab with the hash. The default (without a hash) is to open the first tab.

I don’t want the links to jump to the “tab” id like an anchor tag. Just open/reveal the “tab”.

I’ve created the following code and am able to do everything except internal links with hashes don’t work and if you just type in the hash in the URL and hit return, it doesn’t work. External links with hashes work fine. The prevention of the anchors “jumping” is kinda glitchy since I’m setting the window scrollTo after the page is loaded so it jumps for a second. Guess I should use something other than id tags so this doesn’t happen?

const tabs = document.querySelector(".wrapper");
const tabButton = document.querySelectorAll(".tab-button");
const contents = document.querySelectorAll(".content");
var hash = window.location.hash.substr(1);

tabs.onclick = e => {

  // disable scroll to
  setTimeout(function() {
    window.scrollTo(0, 0);
  }, 1);

  const id = e.target.dataset.id;
  const el1 = document.querySelector('button[data-id="' + id + '"]');

  if (id) {
    tabButton.forEach(btn => {
      btn.classList.remove("active");
    });
    el1.classList.add("active");

    contents.forEach(content => {
      content.classList.remove("active");
    });
    const element = document.getElementById(id);
    element.classList.add("active");
    window.location.hash = '#' + id; // update has in URL
  }
} // end onclick

if (hash) {

  // disable scroll to
  setTimeout(function() {
    window.scrollTo(0, 0);
  }, 1);

  var hashId = document.querySelector('button[data-id="' + hash + '"]');
  console.log(hashId);

  tabButton.forEach(btn => {
    btn.classList.remove("active");
  });
  hashId.classList.add("active");

  contents.forEach(content => {
    content.classList.remove("active");
  });
  var element = document.getElementById(hashId);
  element.classList.add("active");
}

.wrapper {
  width: 100%;
  margin: auto;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, .1);
  font-family: arial, helvetica, sans-serif;
}


/* 5 columns */
.buttonWrapper {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}

button {
  border: none;
  padding: 10px;
  background-color: #e6e6e6;
  color: #000;
  font-size: 18px;
  cursor: pointer;
  transition: 0.5s;
}

button:hover {
  background-color: #d4e7f4;
}

button.active {
  background-color: white;
}

.active {
  background-color: white;
}

.content {
  display: none;
  padding: 50px;
}

.content.active {
  display: block;
}

h2 .content {
  font-weight: 700;
}

<div class="wrapper">
  <div class="buttonWrapper">
    <button class="tab-button active" data-id="one">One</button>
    <button class="tab-button" data-id="two">Two</button>
    <button class="tab-button" data-id="three">Three</button>
    <button class="tab-button" data-id="four">Four</button>
    <button class="tab-button" data-id="five">Five</button>
  </div>
  <div class="contentWrapper">
    <div class="content active" id="one">
      <h2>Title 1</h2>
      <p>Content 1</p>
      <p><a href="#two">Link to two</a></p>
    </div>

    <div class="content" id="two">
      <h2>Title 2</h2>
      <p>Content 2</p>
      <p><a href="#one">Link to one</a></p>
    </div>

    <div class="content" id="three">
      <h2>Title 3</h2>
      <p>Content 3</p>
      <p><a href="#four">Link to four</a></p>
    </div>

    <div class="content" id="four">
      <h2>Title 4</h2>
      <p>Content 4</p>
      <p><a href="#five">Link to five</a></p>
    </div>

    <div class="content" id="five">
      <h2>Title 5</h2>
      <p>Content 5</p>
      <p><a href="#one">Link to one</a></p>
    </div>

  </div>
</div>