Search code examples
javascripttabsecmascript-5

Why don't the links in the tab loop, and I get only the last one?

I'm making tabs with JavaScript ES5, no ES6.

I have looped the tab content successfully, however the links won't loop.

I believe it's because it has looped to the end. So I would need to get each of them with [0] or [1] but that doesn't seem to work either.

I'm trying to replace the hash to nothing - I think that seems to work.

When you click on any tab, only the last one gets selected, not sure how to fix that.

Here is the code pen: https://codepen.io/lovetocodex/pen/VyQLYE?editors=1010

Here is the current HTML code:

    <section>
<!-- New Code -->
<div class="services-tab__container">

  <div class="services-tab__list-topic">
  <ul class="services-tab__nav">

    <li class="services-tab__list-item">
      <a href="#tab_1" class="services-tab__link-item">
        <span>Tab1</span>
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_2" class="services-tab__link-item">
        <span>Tab2</span>
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_3" class="services-tab__link-item">
        <span>Tab3</span>
      </a>
    </li>

    <li class="services-tab__list-item">
      <a href="#tab_4" class="services-tab__link-item">
        <span>Tab4</span>
      </a>
    </li>

  </ul>
  </div><!-- /list-topic -->

  <div class="services-tab__list-content">

    <!-- <img src="<?= get_sub_field('icon') ?>" alt="Slide Icon" class="sslider__icon"> -->

    <div id="tab_1" class="services-tab__tab-item is-visible">
      <h2>Title</h2>
    </div>

    <div id="tab_2" class="services-tab__tab-item">
      <h2>Title22</h2>
    </div>

    <div id="tab_3" class="services-tab__tab-item">
      <h2>Title3</h2>
    </div>

    <div id="tab_4" class="services-tab__tab-item">
      <h2>Title24444442</h2>
    </div>

  </div><!-- /services-tab__list-content -->

</div>
</section>

And here is the current JS code:

window.onload = function() {

 // Variables   
     var tabLinks = document.getElementsByClassName('services-tab__link-item');
     var tabContents = document.getElementsByClassName('services-tab__tab-item');

// Loop through the tab link
for(var i = 0; i < tabLinks.length; i++) {
    var tabLink = tabLinks[i];
    tabLink.addEventListener('click', function(e) {
        console.log(tabLink);

        e.preventDefault();
        var id = tabLink.hash.replace('#', ' ');
        tabLink.classList.add('is-active');



        // Loop through the tab content
        for(var j = 0; j < tabContents.length; j++) {
            var tabContent = tabContents[j];
            console.log(tabContent);
            tabContentId = tabContent.getAttribute('id');
            tabContent.classList.remove('is-visible');

            if(tabContentId === id) {
                tabContent.classList.add('is-visible');
            }

        }


    });

}

}

Solution
    1. Use this instead of tabLink (because when you click on the link, tablink variable was changed already);
    2. Use '' instead of ' ' in replace method;
    3. Remove is-active class after the click from all links excluding the active one.

    window.onload = function() {

  // Variables 	
  var tabLinks = document.getElementsByClassName('services-tab__link-item');
  var tabContents = document.getElementsByClassName('services-tab__tab-item');

  // Loop through the tab links
  for (var i = 0; i < tabLinks.length; i++) {
    tabLinks[i].addEventListener('click', function(e) {
      e.preventDefault();
      var id = this.hash.replace('#', '');

      // Loop through the tab links and tab contents
      for (var i = 0; i < tabLinks.length; i++) {
        tabContents[i].classList.remove('is-visible');
        tabLinks[i].classList.remove('is-active');
        if (tabContents[i].id === id) {
          tabContents[i].classList.add('is-visible');
        }
      }
      this.classList.add('is-active');
    });
  }
}
    /* GLOBAL */

h2 {
  margin: 0;
}


/* TAB MENU */

.services-tab__container {
  width: 50%;
  margin: 0 auto;
}

.services-tab__nav {
  list-style: none;
  padding: 0;
}

.services-tab__list-item {
  display: inline-block;
}

.services-tab__link-item {
  text-decoration: none;
  display: block;
  background: #dadada;
  padding: 9px 14px;
  color: white;
  font-size: 14px;
  border-radius: 6px;
  font-weight: bold;
  transition: .15s ease-in-out;
}

.services-tab__link-item.is-active {
  background-color: #9b9b9b;
}

.services-tab__link-item:hover {
  background-color: #a7a7a7;
}


/* TAB ITEMS */

.services-tab__tab-item {
  background-color: #c1c1c1;
  padding: 20px;
  border-radius: 5px;
  display: none;
}

.services-tab__tab-item.is-visible {
  display: block;
}
    <section>
  <!-- New Code -->
  <div class="services-tab__container">

    <div class="services-tab__list-topic">
      <ul class="services-tab__nav">

        <li class="services-tab__list-item">
          <a href="#tab_1" class="services-tab__link-item is-active">
            <span>Tab1</span>

          </a>
        </li>

        <li class="services-tab__list-item">
          <a href="#tab_2" class="services-tab__link-item">
            <span>Tab2</span>
          </a>
        </li>

        <li class="services-tab__list-item">
          <a href="#tab_3" class="services-tab__link-item">
            <span>Tab3</span>
          </a>
        </li>

        <li class="services-tab__list-item">
          <a href="#tab_4" class="services-tab__link-item">
            <span>Tab4</span>
          </a>
        </li>

      </ul>
    </div>
    <!-- /list-topic -->

    <div class="services-tab__list-content">

      <!-- <img src="<?= get_sub_field('icon') ?>" alt="Slide Icon" class="sslider__icon"> -->

      <div id="tab_1" class="services-tab__tab-item is-visible">
        <h2>Tab 1</h2>
        <p>Lorem ipsum dolor a, quod debitis aspernatur neque sit distinctio. Sit amet consectetur adipisicing elit. Itaque nemo atque incidunt laborum delectus. Cum adipisci perspiciatis blanditiis magni velit nihil id vero? </p>
      </div>

      <div id="tab_2" class="services-tab__tab-item">
        <h2>Tab 2 - YAY</h2>
      </div>

      <div id="tab_3" class="services-tab__tab-item">
        <h2>Tab 3 - Awesome!</h2>
        <p>Cum adipisci perspiciatis blanditiis magni velit nihil id vero? Lorem ipsum dolor sit amet consectetur adipisicing elit. Itaque nemo atque incidunt laborum delectus a, quod debitis aspernatur neque sit distinctio.</p>
      </div>

      <div id="tab_4" class="services-tab__tab-item">
        <h2>Tab 4 - Happy Coding!</h2>
        <p>Cum adipisci perspiciatis blanditiis magni velit nihil id vero? Itaque nemo atque incidunt laborum delectus a, quod debitis aspernatur neque sit distinctio.</p>
      </div>

    </div>
    <!-- /services-tab__list-content -->

  </div>
</section>