Tabs do not function as they should

Question

I am creating a simple application that has 2 tabs - Bioand Timeline, each with its own content. I want to show / hide content based on what I click. My HTML, CSS, and JS files are listed below: ( https://jsfiddle.net/m25owpse/ )

$(document).ready(function() {
  $('.tablink').on('click', function(e) {
    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $('.dashfolio-about' + currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    $(this).addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});

.about-header-container {
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
}
.about-header-container>a {
  padding-right: 10px;
}
#bio-dashfolio {
  margin-top: 20px;
}
.tablink:active {
  color: red;
}
.tabcontent {
  display: none;
}
.tabcontent.active {
  display: block;
}

<div class="dashbolio-about">

  <div class="about-header-container">
    <a class="bio-header tablink" href="#bio-dashfolio"> Bio </a> 
    <a class="timeline-header tablink" href="#timeline-dashfolio"> Timeline </a> 
  </div>
  <div>
   <div class="tabcontent" id="bio-dashfolio">

      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed
        vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit
        diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus
        vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus.
        Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor</p>

    </div>
    <div class="tabcontent" id="timeline-dashfolio">
      <p>Random text is awesome don't you think?!</p>
    </div>
  </div>
</div>

Run codeHide result

This, however, does not do the trick. I think I'm on the right track, so please help me understand what I'm wrong about. Thanks in advance!

Answer 1

Your problem in this line:

$('.dashfolio-about' + currentAttrValue).show().siblings().hide();

change to:

$(currentAttrValue).show().siblings().hide();

Excerpt:

$(document).ready(function() {
  $('.tablink').on('click', function(e)  {
    var currentAttrValue = $(this).attr('href');

    // Show/Hide Tabs
    $(currentAttrValue).show().siblings().hide();

    // Change/remove current tab to active
    $(this).addClass('active').siblings().removeClass('active');

    e.preventDefault();
  });
});

.about-header-container {
  margin-left: 80px;
  margin-top: 10px;
  font-size: 15px;
}

.about-header-container>a {
  padding-right: 10px;
}


#bio-dashfolio {
  margin-top: 20px;
}


.tablink:active {
  color: red;
}

.tabcontent {
  display:none;
}

.tabcontent.active {
  display:block;
}

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<div class = "dashbolio-about">

    <div class= "about-header-container">
        <a class = "bio-header tablink" href= "#bio-dashfolio"> Bio </a>
        <a class = "timeline-header tablink" href= "#timeline-dashfolio"> Timeline </a>
    </div>

    <div>


        <div class = "tabcontent" id= "bio-dashfolio" >

            <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor sodales suscipit in in metus. Proin laoreet eros nibh, ut hendrerit diam pharetra at. Morbi id nisi efficitur, vehicula turpis non, tristique sapien. Sed sed vestibulum massa. Vestibulum fringilla tortor id facilisis tempus. Cras consectetur sapien nibhLorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus vitae diam non dolor  </p>

        </div>

        <div class = "tabcontent" id = "timeline-dashfolio">

            <p> Random text is awesome don't you think?! </p>


        </div>
    </div>

</div>

Run codeHide result