JSFiddle - React, Tailwind, and code Playground

HTML

<style>
/* volgende selector kan weg, alleen voor test */
.accordeon::after {
    display: block; clear: both; content: "";
}
.accordeon .ac-button {
    display: block;
}
.accordeon .ac-panel {
    display: none;
}
.accordeon .ac-show + .ac-panel {
    display: block;
}
</style>

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

<br><br><br>

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

JavaScript

fnGetSiblings = function (e) {
    // van www.javascripttutorial.net/javascript-dom/javascript-siblings/
    var siblings = []; 
    if (!e.parentNode) return siblings;
    var sibling = e.parentNode.firstChild;
    while (sibling) {
        if (sibling.nodeType === 1 && sibling !== e) siblings.push(sibling);
        sibling = sibling.nextSibling;
    }
    return siblings;
}

fnAccordeon = function (id) {
    acc = document.getElementById(id);
    var btns =  acc.querySelectorAll('#' + id + ' .ac-button');
    for (var i=0; i < btns.length; i++) {
        btns[i].addEventListener("click", function(event) {
            event.preventDefault();
            var btn = this;
            var sibl = fnGetSiblings (btn);
            for (var j=0; j < sibl.length; j++) {
                sibl[j].classList.remove('ac-show');
            }
            btn.classList.toggle('ac-show');
        });
    }
}

fnAccordeon ('lijst_1');
fnAccordeon ('lijst_2');