JSFiddle - React, Tailwind, and code Playground

by Jean-Baptiste Audras

HTML

<div class="replie">
    <a class="bouton-deplier">Ouvrir</a>
</div>
<div class="deplie">
    <span class="bouton-replier">Fermer</span>
    <div class="montexte">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
</div>
<br /><br />
<div class="replie">
    <a class="bouton-deplier">Ouvrir</a>
</div>
<div class="deplie">
    <a class="bouton-replier">Fermer</a>
    <div class="montexte">Le Lorem Ipsum est simplement du faux texte employé dans la composition et la mise en page avant impression.</div>
</div>

CSS

.replie {
    margin: 10px;
}
.bouton-deplier {
    text-decoration: none;
    color: #fff;
    background: #000;
    padding: 5px 10px;
    cursor: pointer;
}
.deplie {
    margin: 10px;
    background: red;
    color: #fff;
}
.bouton-replier {
    margin: 10px;
    display: inline-block;
    text-decoration: none;
    color: #fff;
    background: #000;
    padding: 5px 10px;
    cursor: pointer;
}
.montexte {
    padding: 10px 10px 20px 10px;
}

JavaScript

$(function(){
    $('.deplie').hide(); // on masque tout 
    $('.bouton-deplier').click(function(event){
        event.preventDefault(); // on ne suit pas le lien
        $('.deplie').fadeOut(); // OPTIONNEL : on ferme ceux qui sont ouverts
        $(this).parent().next().fadeIn(); // on ouvre
    });
    $('.bouton-replier').click(function(event){
        event.preventDefault(); // on ne suit pas le lien
        $(this).parent().fadeOut(); // on ferme
    });
});