Keshav Vasudevan Keshav Vasudevan - 3 months ago 16
CSS Question

Tabs not functioning as they should

I'm creating a simple application which has 2 tabs -

Bio
and
Timeline
, each with their own content. I want to show/hide content based on what I click. My HTML, CSS and JS files are as shown below -
(https://jsfiddle.net/m25owpse/)

HTML :

<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>


CSS:

.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;
}


JS:

$(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();
});
});


This is however, not doing the trick. I think I'm on the right track, so please help me understand where I'm going wrong. Thanks in advance!

Answer

Your problem is in this line:

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

change to:

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

The snippet:

$(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>