JSFiddle - React, Tailwind, and code Playground

by Mr_Vasu

HTML

<ul class="menu">
    <li class="toggle1">One</li>
    <li class="toggle2">Two</li>
    <li class="toggle3">Three</li>
    <li class="toggle4">Four</li>
    <li class="toggle5">Five</li>
</ul>
<div class="container">
    <div class="toggle1">Here are the contents of 1.</div>
    <div class="toggle2">Here are the contents of 2..</div>
    <div class="toggle3">Here are the contents of 3...</div>
    <div class="toggle4">Here are the contents of 4....</div>
    <div class="toggle5">Here are the contents of 5.....</div>
</div>

CSS

.menu > li {
    display:inline-block;
    font-weight:bold;
    padding:6px 10px;
    cursor:pointer;
    border:2px solid tomato;
    margin:5px;
}
.container {
    border:2px solid black;
    margin:5px;
}
.container > div {
    display:none;
}
.container > div:first-child {
    display:block;
}

JavaScript

$('.menu>li').on('click',function(e){
    $('.container>.'+ e.target.classList[0]).show().siblings().hide();
});