JSFiddle - React, Tailwind, and code Playground

by fripouille

HTML

<div class="container_general">
    <div class="accordeon_sous_menu"> <a class="accordeon" href="#">bouton 1
			    <span class="puce_open"></span>
		</a>

    </div>
    <div class="line_grey"></div>
    <div class="container_infos">
        <p>Blabla</p>
    </div>
</div>

CSS

.container_infos {
    display:none;
}
.active {
    border:1px solid red;
}
.active span {
    border:1px solid green;
}
.line_active {
    border:4px solid blue;
}

JavaScript

$('.container_general a.accordeon').click(function (e) {
			    e.preventDefault()
			    $(this).parent(".accordeon_sous_menu").toggleClass("active");
			    $("span:first", this).toggleClass("active");

			    $("line_grey").slideToggle(700).toggleClass("line_active"
			    $(this).next("container_infos").slideToggle(1000);

			    });
			});