JSFiddle - React, Tailwind, and code Playground

by John Semblante

HTML

<div class="wrapper-slide">
    <div class="wrapper">
        <div class="wrapper-l1">
            <h1 class="cat-1">Category1</h1>
            <h1 class="cat-2">Category2</h1>
            <h1 class="cat-3">Category3</h1>
        </div>
        <div class="wrapper-l2">
            <h1 class="append-head"></h1>
            <div class="sec-wrapper-l1" id = "cat-1">
                <span class="rights-a1"><</span>
                <h1 class="sec-1">Section1</h1>
                <h1 class="sec-2">Section2</h1>
                <h1 class="sec-3">Section3</h1>
            </div>
            <div class="sec-wrapper-l2" id = "cat-2">
                <span class="rights-a1"><</span>
                <h1 class="sec-4">Section4</h1>
                <h1 class="sec-5">Section5</h1>
                <h1 class="sec-6">Section6</h1>
            </div>
            <div class="sec-wrapper-l2" id = "cat-3">
                <span class="rights-a1"><</span>
                <h1 class="sec-7">Section7</h1>
                <h1 class="sec-8">Section8</h1>
                <h1 class="sec-9">Section9</h1>
            </div>
        </div>
        <div class="wrapper-l3">
            <h1 class="append-head-a2"></h1>
            <h1 class="append-head-a1"></h1>
            <div class="art-wrapper-l1" id = "sec-1">
                <span class="rights-a2"><</span>
                <h1 class="art-1">Section1 Article1</h1>
                <h1 class="art-2">Section1 Article2</h1>
                <h1 class="art-3">Section1 Article3</h1>
            </div>
            <div class="art-wrapper-l2" id = "sec-2">
                <span class="rights-a2"><</span>
                <h1 class="art-1">Section2 Article1</h1>
                <h1 class="art-2">Section2 Article2</h1>
                <h1 class="art-3">Section2 Article3</h1>
            </div>
            <div class="art-wrapper-l3" id = "sec-3">
                <span class="rights-a2"><</span>
                <h1 class="art-1">Section3 Article1</h1>
   ...

CSS

.wrapper-slide{
    width: 400px;
    height: auto;
    overflow: hidden;
}
.wrapper{
    width: 1200px;
    height: auto;
    overflow: hidden;
}

.wrapper-l1,
.wrapper-l2,
.wrapper-l3{
    width: 400px;
    height: auto;
    min-height: 400px;
    overflow: hidden;
    color: #fff;
    float: left;
}

.wrapper-l1{
    background: red;
}

.wrapper-l2{
    background: green;
}

.wrapper-l3{
    background: blue;
}

.wrapper-l2 div,
.wrapper-l3 div{
    display: none;
}

span,
h1{
    cursor: pointer;
}

JavaScript

$('.wrapper-l1 h1').on('click', function () {
    var c = $(this).attr("class");
    var e = $(this).text();
    $("#" + c).show();
    $('.append-head').text(e);
    
    $(this).closest('div').animate({
        marginLeft: '-400px'
    });
});


$('.wrapper-l2 div h1').on('click', function() {
    var d = $(this).attr("class");
    var g = $('.append-head').text();
    var f = $(this).text();
    $("#" + d).show();
    $('.append-head-a2').text(g);
    $('.append-head-a1').text(f);
    
    $('.wrapper-l1, .wrapper-l2').animate({
        marginLeft: '-400px'
    });
});

$('.wrapper-l2 div .rights-a1').on('click', function() {
    $('.wrapper-l1, .wrapper-l2').animate({
        marginLeft: 0
    });
    $('.wrapper-l2 div').fadeOut();
});

$('.wrapper-l3 div .rights-a2').on('click', function() {
    $('.wrapper-l2, .wrapper-l3').animate({
        marginLeft: 0
    });
    $('.wrapper-l3 div').fadeOut();
});