JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordeon">
    <div class="ac-button"><span class="ac-icon"></span>Accordeon 1</div>
    <div class="ac-panel">
        <p>Accordeon 1 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <div class="ac-button"><span class="ac-icon"></span>Accordeon 2</div>
    <div class="ac-panel">
        <p>Accordeon 2 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
    <div class="ac-button"><span class="ac-icon"></span>Accordeon 3</div>
    <div class="ac-panel">
        <p>Accordeon 3 tekst. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>  
</div>

CSS

.accordeon {
    padding: 0 8px;
}
.ac-button {
    padding: 4px 16px 8px 16px;
    font-weight: bold;
    color: #359;
    /* regel hieronder is verplicht */
    cursor: pointer;
}
.ac-panel {
    padding: 4px 16px 8px 32px;
    /* regel hieronder is verplicht */
    display: none;
}
.ac-panel p {
	margin: 0;
}
.ac-button, .ac-show + .ac-panel {
    border-bottom: 1px solid #ccc;
}
.ac-button:first-child {
    border-top: 1px solid #ccc;
}

JavaScript

$(document).ready(function() {
    $(".accordeon .ac-button").on("click", function(e) {
        $(this).toggleClass("ac-show");
        // *** verwijder volgende regel als geopende items pas sluiten als er nog een keer op wordt geklikt
        $(this).siblings().removeClass("ac-show");
        $(".accordeon .ac-show + .ac-panel").stop(true, true).slideDown(400);
        $(".accordeon .ac-button:not(.ac-show ) + .ac-panel").stop(true, true).slideUp(400);
    });
});