JSFiddle - React, Tailwind, and code Playground

by InferOn

HTML

<div id="menu-content">
        <a id="5home" class="show" href="#">Home</a>
        <a id="5contact" class="show" href="#">Contact</a>
        <a id="5about_us" class="show" href="#">About us</a>
        <a id="5a_team" class="show" href="#">A-Team</a>
        <a id="5connect" class="show" href="#">Connect</a>
        <a id="5donate" class="show" href="#">Donate</a>
    </div>

        <div class="cont" id="home" style="visibility :visible ;">
            pippo
        </div>

        <div class="cont" id="contact" style="visibility :hidden ;">
            pluto
                    </div>

        <div class="cont" id="about_us" style="visibility :hidden;">
            paperino
        </div>  

        <div class="cont" id="a_team" style="visibility :hidden ;">
            tizio
        </div>

        <div class="cont" id="connect" style="visibility :hidden;">
            caio
        </div>  

        <div class="cont" id="donate" style="visibility :hidden;">
            sempronio
        </div>

CSS

div.cont{float:left;
        display:inline-block}

JavaScript

$(document).ready(function(){
    $('.show').click(function menu() {
        var id = '#';
        id += this.id;
        id = id.replace(/5/, '');
        $('.cont').not(id).attr('visibility') = 'hidden'
        
        if ($(id).attr('visibility') == 'hidden') {
        }
        else {
            var ido = '#';
            ido += $('.cont:visible').attr('id');
            $(ido).animate({
                visibility: 'toggle',
            }, 350);
            $(id).animate({
                visibility: 'toggle',
            }, 350);
        }
    });
});