JSFiddle - React, Tailwind, and code Playground

by fripouille

HTML

<div class="container_infos_rubrique">
    <div class="accordeon_sous_menu"> <a class="accordeon_rubrique" href="#">bouton 1
		
                <span class="dropdown_accordeon_vivre_ici_open">›</span>        
        
        </a>

    </div>
    <div class="line_grey"></div>
    <div class="container accordeon_rubriques_pages">
        <div>
            <p>options page, agrandissement texte.. . .</p>
        </div>
        <div>
            <p>contenu....</p>
        </div>
    </div>
</div>

CSS

.line_grey {
    background-color: rgba(245, 245, 245, 1);
    height: 15px;
    width: 960px;
    display:none;
}
.line_active {
    display:block;
}
.accordeon_rubriques_pages {
    display:none;
}
.container {
    max-width:940px;
    padding: 0 10px;
}
.dropdown_accordeon_vivre_ici_open {
    color:red;
}
.dropdown_accordeon_vivre_ici_close {
    color:green;
    font-size:2em;
}

JavaScript

$('.container_infos_rubrique a.accordeon_rubrique').click(function (e) {
    e.preventDefault()
    $(this).find("span").toggleClass("dropdown_accordeon_vivre_ici_close");
    $('.container_infos_rubrique').find(".line_grey").slideToggle(700).toggleClass("line_active");
    $('.container_infos_rubrique').find("div[id^='element_']").slideToggle(1000);

});