Vertical Tabs with default content

by davidxmartins

HTML

<body>

<section class="lsf-vantagens-intro">

<h2>Porquê LSF?</h2><br>

<div class="vantag-intro__container">
    <div class="vantag-intro__list">
        <div class="vantag-intro__tab" id="vant-intro__tab-1">1. Mais Rápido <span>></span></div>
        <div class="vantag-intro__tab" id="vant-intro__tab-2">2. Mais Eficiente <span>></span></div>
        <div class="vantag-intro__tab" id="vant-intro__tab-3">3. Mais Económico <span>></span></div>
        <div class="vantag-intro__tab" id="vant-intro__tab-4">4. Mais Versátil <span>></span></div>
        <div class="vantag-intro__tab" id="vant-intro__tab-5">5. Mais Durável <span>></span></div>
        <div class="vantag-intro__tab" id="vant-intro__tab-6">6. Mais Seguro <span>></span></div>
        <div class="vantag-intro__tab" id="vant-intro__tab-7">7. Mais Confortável <span>></span></div>
        <div class="vantag-intro__tab" id="vant-intro__tab-8">8. Mais Ecológico <span>></span></div>
    </div>
    <div class="vantag-intro__content-area">
        <div id="vantag-intro__default-content" class="vantag-intro__content">
    <h3>Porque LSF é a construção do Futuro!</h3>
</div>
        <div class="vantag-intro__content" id="vant-intro__content-1"><h3>Mais Rápido</h3></div>
        <div class="vantag-intro__content" id="vant-intro__content-2"><h3>Mais Eficiente</h3></div>
        <div class="vantag-intro__content" id="vant-intro__content-3"><h3>Mais Económico</h3></div>
        <div class="vantag-intro__content" id="vant-intro__content-4"><h3>Mais Versátil</h3></div>
        <div class="vantag-intro__content" id="vant-intro__content-5"><h3>Mais Durável</h3></div>
        <div class="vantag-intro__content" id="vant-intro__content-6"><h3>Mais Seguro</h3></div>
        <div class="vantag-intro__content" id="vant-intro__content-7"><h3>Mais Confortável</h3></div>
        <div class="vantag-intro__content" id="vant-intro__content-8"><h3>Mais Ecológico</h3></div>
    </div>
</div>
 
<script...

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

section {
  background: #04806f;
  margin: 0;
  padding: 5vh 3vw;
  box-sizing: border-box;
  height: 100%;
}

.lsf-vantagens-intro h2 {
  font-family: "poppins", sans-serif;
  font-size: 40px;
  color: white;
  margin: 0;
  padding: 0;
}
.vantag-intro__container {
    display: flex;
    width: 100%;
    font-family: "poppins", sans-serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    margin: 0;
    padding: 0;
}

.vantag-intro__list {
    width: 400px;
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
}

.vantag-intro__content-area {
    flex-grow: 1;
    position: relative; 
}

.vantag-intro__tab {
    cursor: pointer;
    color: white;
    transition: all 0.4s ease-out;
    padding: 10px 0;
}
/* On hover */
.vantag-intro__tab:hover {
    color: #89e0b5;
}

div.vantag-intro__tab span {
  display: inline-block;
  opacity: 1;
  transform: translateX(-100%);
  margin: 0 0 0 12px;
  transition: opacity 0.2s, transform 0.5s;
}

/* On hover */
div.vantag-intro__tab:hover span {
  opacity: 1;
  transform: translateY(0);
}
/* Avtive state */
.vantag-intro__tab.active {
    color: #89e0b5;
    font-size: 35px;
    font-weight: 500;
}
.vantag-intro__tab.active span {
    display: none;
}


.vantag-intro__content {
    position: absolute; 
    top: 0; 
    left: 0; 
    opacity: 0; 
    transition: opacity 0.3s ease-in-out; 
}

.vantag-intro__content h3 {
    margin: 0;
    padding;0;
}

#vantag-intro__default-content h3 {
  font-family: "poppins", sans-serif;
  font-size: 100px;
  font-weight: 600;
  color: #89e0b5;
  margin: 0;
  padding: 0;
}

JavaScript

$('document').ready(function() {
    // Show the default content at start
    $('#vantag-intro__default-content').css("opacity", "1");

    $('.vantag-intro__tab').off('click').on('click', function() {
        var tabNumber = this.id.split('-').pop();

        // Hide the default content
        $('#vantag-intro__default-content').css("opacity", "0");

        // Remove active class from all tabs
        $('.vantag-intro__tab').removeClass('active');

        // Add active class to the clicked tab
        $(this).addClass('active');

        // Stop currently running animations
        $('.vantag-intro__content').stop(true, true);

        // Set opacity to 0 for all contents
        $('.vantag-intro__content').css("opacity", "0");

        // Animate the opacity to 1 for the corresponding content
        $('#vant-intro__content-' + tabNumber).animate({opacity: 1}, 300);
    });
});