JSFiddle - React, Tailwind, and code Playground

by THEtheChad

HTML

<div id="left-panel">
    <ul>
        <li><a data-id="item1">One</a>

            <li><a data-id="item2">Two</a>

                <li><a data-id="item3">Three</a>

                    <li><a data-id="item4">Four</a>

    </ul>
</div>
<div id="right-panel">
    <div data-id="item1" class="details">
        <p>First Box</p>
    </div>
    <div data-id="item2" class="details">
        <p>Second Box</p>
    </div>
    <div data-id="item3" class="details">
        <p>Third Box</p>
    </div>
    <div data-id="item4" class="details">
        <p>Fourth Box</p>
    </div>
</div>

CSS

.details {
    padding: 20px;
    border: 1px solid #ccc;
    margin: 2px;
    width: 100px;
}
#right-panel {
    float: right;
    margin: 20px;
}
#left-panel {
    float: left;
}
#left-panel li {
    background: teal;
    padding: 8px;
    margin: 8px;
    width: 50px;
    text-align: center;
}
}

JavaScript

$(function () {
    var $buttons = $('#left-panel');
    var $boxs = $('.details');

    $buttons.on('click', 'a', function (e) {

        var id = $(this).data('id');

        $boxs.each(function () {
            var $this = $(this);
            if ($this.data('id') == id) $this.slideDown();
            else $this.slideUp();
        });
    });
});