JSFiddle - React, Tailwind, and code Playground

by megarameno

HTML

<div class="mobile-nav">
    <ul>
        <li>
            <input class="mobile-nav-tab active" id="search-tab" type="button" value="search" />
        </li>
        <li>
            <input class="mobile-nav-tab" id="menu-tab" type="button"  value="menu" />
        </li>
        <li>
            <input class="mobile-nav-tab" id="members-tab" type="button" value="members" />
        </li>
    </ul>
</div>
<div class="mobile-nav-content">
    <div id="search" class="content-item"></div>
    <div style="display:none" id="menu" class="content-item">
        <br>menu
        <br>menu</div>
    <div style="display:none" id="members" class="content-item">
        <br>members
        <br>members</div>
</div>

CSS

.mobile-nav ul{
    padding:0px;
}
.mobile-nav li {
    float:left;
    list-style:none;
}
.mobile-nav li .active {
    background-color:#f00;
}
.mobile-nav-content {
    width:200px;
}
.mobile-nav-content {
    clear:both;
}
.content-item {
    height:100px;
}
#menu {
    background-color:#f00;
}
#search {
    background-color:#ff0;
}
#members {
    background-color:#f0F;
}

JavaScript

$(document).ready(function () {
    
    
    $('.mobile-nav-tab').on("click", function () {
        clickedId = $(this).attr("id");
        $('.mobile-nav-tab').each(function (index) {
            if ($(this).attr("id") == clickedId) {
                $('.mobile-nav-tab,.content-item').eq(index).addClass('active');
                $(".content-item").eq(index).slideDown();
            } else {
                $('.mobile-nav-tab,.content-item').eq(index).removeClass('active');
                $(".content-item").eq(index).hide();
            }
        });
    });
    
    
});