JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordeon_sous_menu">
		<a class="accordeon_rubrique" href="#">
			<div class="zone_titre_sous_menu">
				<span class="dropdown_accordeon_vivre_ici">Span</span>
			</div>
		</a>
</div>
<div class="container accordeon_rubriques_pages" id="element_04">Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container Container</div>

CSS

span.dropdown_accordeon_vivre_ici {
    background-color: #0f0;
}

span.dropdown_accordeon_vivre_ici.dropdown_accordeon_vivre_ici_second {
    background-color: #00f;
}

JavaScript

$(document).ready(function(){
    $('.accordeon_rubrique').click(function(){
        $("span:first", this).toggleClass("dropdown_accordeon_vivre_ici_second")    
        $(this).parent(".accordeon_sous_menu").toggleClass("accordeon_sous_menu_active")
        $(".zone_titre_sous_menu",this).toggleClass("zone_titre_sous_menu_active")
        $("div[id^='element_']:first").slideToggle(1000);
		return false;
	});	
});