Vertical Tabs test

by davidxmartins

HTML

<body>

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

<h2 class="vantag-intro__header">Porquê LSF?</h2>

<div class="vantag-intro__container">
    <ul class="vantag-intro__list">
        <li class="vantag-intro__tab" id="vant-intro__tab-1">1. Mais Rápido <span>></span></li>
        <li class="vantag-intro__tab" id="vant-intro__tab-2">2. Mais Eficiente <span>></span></li>
        <li class="vantag-intro__tab" id="vant-intro__tab-3">3. Mais Económico <span>></span></li>
        <li class="vantag-intro__tab" id="vant-intro__tab-4">4. Mais Versátil <span>></span></li>
        <li class="vantag-intro__tab" id="vant-intro__tab-5">5. Mais Durável <span>></span></li>
        <li class="vantag-intro__tab" id="vant-intro__tab-6">6. Mais Seguro <span>></span></li>
        <li class="vantag-intro__tab" id="vant-intro__tab-7">7. Mais Confortável <span>></span></li>
        <li class="vantag-intro__tab" id="vant-intro__tab-8">8. Mais Ecológico <span>></span></li>
    </ul>
    <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>
        <p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque.
        </p></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"...

CSS

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

section.lsf-vantagens-intro {
  background: #04806f;
  margin: 0;
  padding: 5vh 3vw;
  box-sizing: border-box;
  height: auto;
}

.lsf-vantagens-intro h2 {
  font-family: "poppins", sans-serif;
  font-size: 40px;
  color: white;
  margin: 0;
  padding: 0 0 40px 0;
  display: inline-block;
}

.lsf-vantagens-intro h2:hover {
  color: #89e0b5;
  cursor: pointer;
  transition: all 0.3s ease-in-out;
}

.vantag-intro__container {
    display: flex;
    width: 100%;
    font-family: "poppins", sans-serif;

}

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

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

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

.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 */
.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 0 30px 0;
    padding;0;
    color: white;
}
.vantag-intro__content p {
    margin: 0;
    padding;0;
    font-weight: 300;
    font-size: 20px;
    line-height: 1.5;
    color: white;
}

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

JavaScript

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

    // Assign a click event to the h2 title
    $('.vantag-intro__header').on('click', function() {
        // Set opacity to 0 for all contents
        $('.vantag-intro__content').css("opacity", "0");

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

        // Show the default content
        $('#vantag-intro__default-content').css("opacity", "1");
    });

    $('.vantag-intro__tab').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);
    });
});