JSFiddle - React, Tailwind, and code Playground

by Helmut Granda

HTML

<div id="content">
    <div id="nav">
        <li class="nav">show content a</li>
        <li class="nav">show content b</li>
        <li class="nav">show content c</li>
    </div>
    <div class="content content-a">content a</div>
    <div class="content content-b">content b</div>
    <div class="content content-c">content c</div>
</div>

CSS

.nav {
    display: block;
    cursor:pointer;
    background: #f5f5f5;
}
.content {
    background: #d2d2d2;
}
.nav, .content {
    margin: 10px;
    width: 120px;
    border: 1px solid #d2d2d2;
    padding: 4px;
}

JavaScript

$(".content").hide();

$(".nav").click(function () {
    var indexElement = $(this).index();
    showContent(indexElement);
});


function showContent(element) {
    console.log("check");
    $(".content").hide();
    $('.content:eq(' + element + ')').show();
}