JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordeon_sous_menu">
		<a class="accordeon_rubrique" href="#" data-num="1">
			<div class="zone_titre_sous_menu">
				<span class="dropdown_accordeon_vivre_ici">Span1</span>
			</div>
		</a>
		<a class="accordeon_rubrique" href="#" data-num="2">
			<div class="zone_titre_sous_menu">
				<span class="dropdown_accordeon_vivre_ici">Span2</span>
			</div>
		</a>
</div>
<div class="container accordeon_rubriques_pages" id="element_01">Container 1</div>
<div class="container accordeon_rubriques_pages" id="element_02">Container 2</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")
        $("#element_0" + this.dataset.num).slideToggle(1000);
		return false;
	});	
});