JSFiddle - React, Tailwind, and code Playground

by micmic

HTML

<a href="#" id="tools_link">Tools</a>
 <a href="#" id="contact_link">Contact</a>

<br/>
<br/>
<br/>
<div class="container" id="cacher">
    <div class="tools" > 
        <a href="#">Lien 1</a>
        <a href="#">Lien 2</a>
        <a href="#">Lien 3</a>
        <a href="#">Lien 4</a>
        <a href="#">Lien 5</a>
        <a href="#">Lien 6</a>
        <a href="#">Lien 7</a>
    </div>
    <div class="contact">
        <a href="#">Contact</a>
        <a href="#">L'Equipe</a>
    </div>
</div>

CSS

.target, .contact {
    display: inline-block;
    float: left;
}
a {
    margin: 10px;
}
.container {
    position: relative;
}
.tools{
    width:auto;
}
.tools a, .contact a{
    visibility : hidden;
}
.contact{
    width:auto;
}

JavaScript

$(document).ready(function () {

    $("#contact_link").click(function () {
        $(".tools a ").css({"visibility":"visible"});
        $(".contact a").css({"visibility":"hidden"});
    });

    $("#tools_link").click(function () {
        $(".contact a ").css({"visibility":"visible"});
        $(".tools a").css({"visibility":"hidden"});
    });

});