JSFiddle - React, Tailwind, and code Playground

by Simon Hi

HTML

<section id="competences">
    <div class="competence">
        <h3 id="competence_hardware">Hardware</h3>
        <button type="button" class="competence_lien" id="hardware">
            <img class="competence_illu" src="./img/competences/monter_pc_ret.jpg" title="Montage, réparation de PC et portables" />
        </button>
    </div>
    <div class="competence">
        <h3 id="competence_logiciels">Software</h3>
        <button type="button" class="competence_lien" id="software">
            <img class="competence_illu" src="./img/competences/windows_7.jpg" title="Systèmes" />
        </button>
    </div>
    <div class="competence">
        <h3 id="competence_reso">Réseaux</h3>
        <button type="button" class="competence_lien" id="reso">
            <img class="competence_illu" src="./img/competences/reseau_ret.jpg" title="Réseaux et infrastructures" />
        </button>
    </div>
    <div class="competence" id="dernier">
        <h3 id="competence_web">Sites web</h3>
        <button type="button" class="competence_lien" id="web">
            <img class="competence_illu" src="./img/competences/dev_web_ret.jpg" title="Developpement web"/>
        </button>
    </div>
</section>

<div id="details_hardware" class="details">
    <p>Hardware. Aliquam cursus nisl non nisi auctor iaculis. Proin convallis eros non pellentesque gravida. Vestibulum egestas lacus in facilisis blandit. Praesent leo dui, condimentum eu efficitur nec, tincidunt vel enim. Cras vehicula lacinia porta. Nullam a erat placerat, luctus orci faucibus, iaculis dolor. Etiam dui nisl, luctus et aliquam vitae, ultricies at mauris. Duis dictum massa eget sodales aliquet.</p>
</div>

<div id="details_software" class="details">
    <p>Software. Aliquam cursus nisl non nisi auctor iaculis. Proin convallis eros non pellentesque gravida. Vestibulum egestas lacus in facilisis blandit. Praesent leo dui, condimentum eu efficitur nec, tincidunt vel enim. Cras vehicula lacinia porta. Nullam a erat...

CSS

.competence {position:relative;display:inline-block;padding-top:3em;}
h3 {position:absolute;top:0;}
button {height:100px;width:100px;}

JavaScript

var competence_hardware_clicked=0;
var competence_logiciels_clicked=0;
var competence_reso_clicked=0;
var competence_web_clicked=0;

$(document).ready(function()
{
    $('.details').hide();
    $('.competence h3').hide();
    $("button.competence_lien").hover(
        function()
        {
            var $titre=$(this).prev("h3");
            //$(this).prev(titre).slideToggle();
            $titre.show(100);
        },
        function()
        {
            //$(this).prev("h3").hide("fast");
            if (!competence_hardware_clicked) $("#competence_hardware").hide("fast");
            if (!competence_logiciels_clicked) $(this).prev("#competence_logiciels").hide("fast");
            if (!competence_reso_clicked) $(this).prev("#competence_reso").hide("fast");
            if (!competence_web_clicked) $(this).prev("#competence_web").hide("fast");
        }
    );
    
    $("button.competence_lien").click(
        function()
        {
            var $titre=$(this).prev("h3");
            var id=$(this).attr('id');
            switch(id)
            {
                case 'hardware': afficherDetails($titre,id); competence_hardware_clicked=1; break;
                case 'software': afficherDetails($titre,id); competence_logiciels_clicked=1; break;
                case 'reso': afficherDetails($titre,id); competence_reso_clicked=1; break;
                case 'web': afficherDetails($titre,id); competence_web_clicked=1; break;
            }
        }
    );
    
    function afficherDetails($titre,id)
    {
        $titre.show();
        $(".details").hide();
        $('#details_'+id).show(1000);
    };
}
);