JSFiddle - React, Tailwind, and code Playground

by Taleeb Anwar

HTML

<div class="buttons"> <a href="" class="active_button" data-sectionId="section1">Section 1</a>
 <a href="" data-sectionId="section2">Section 2</a>
 <a href="" data-sectionId="section3">Section 3</a>
 <a href="" data-sectionId="section4">Section 4</a>

</div>
<div class="sections">
    <div class="section active_section" id="section1">Section 1
        <br>Section 1
        <br>Section 1
        <br>Section 1
        <br>
        <br>
    </div>
    <div class="section" id="section2">Section 2
        <br>Section 2
        <br>Section 2
        <br>Section 2
        <br>
        <br>
    </div>
    <div class="section" id="section3">Section 3
        <br>Section 3
        <br>Section 3
        <br>Section 3
        <br>
        <br>
    </div>
    <div class="section" id="section4">Section 4
        <br>Section 4
        <br>Section 4
        <br>Section 4
        <br>
        <br>
    </div>
</div>

CSS

body {
    text-align: center;
    padding-top: 50px;
}
a {
    color: white;
    text-decoration: none;
    padding: 10px;
    background-color: grey;
    margin: 0px -1px;
    border-radius: 10px 10px 0px 0px;
    transition: all 0.3s ease-in-out;
}
a:hover {
    background-color: lightgrey;
}
.active_button {
    background-color: lightgrey;
}
.sections {
    position: relative;
}
.section {
    display: none;
    padding: 20px;
    background-color: lightgrey;
    position: absolute;
    width: 286px;
    top: 10px;
    left: 50%;
    margin-left: -163px;
    border-radius: 0 0 10px 10px;
}
.active_section {
    display: block;
}

JavaScript

$("a").click(function (e) {

    // prevent default link behaviour
    e.preventDefault();
    var currentAnchor = $(this);
    // hide the current active section 
    $(".active_section").slideUp(500, function () {
        // then take away their active class
        $(this).removeClass("active_section");
        $('.active_button').removeClass('active_button');
        $(currentAnchor).addClass('active_button');
    });

    // click function closes here


    // find out what section button is pressed
    var sectionId = $(this).attr("data-sectionId");

    console.log(sectionId);
    // slide down that section
    $("#" + sectionId).slideDown(500, function () {
        // add the active class
        $(this).addClass("active_section");
        
    });
    
    
});