Javascript Accordion | Cevap #4022

Bir accordion yapmaya çalışıyorum, her şey güzel gidiyordu tâki açık olan accordionların hepsinin kapanmasını istiyene kadar.
Yapmak istediklerim:

Hepsinin kapalı duruma getirebilir olması
Açık olmayan bir accordion butonuna tıklarsam açık olan kapanıp tıkladığımın açılması
slideUp / slideDown efekti gibi kapanıp açıklabiliyor olması

Şuana kadar gelebildiğim nokta -> codepen.io


<section class="accordion">
    <button role="button">Accordion 1</button>
    <div class="content 1 show">
        <p>1 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cupiditate id, cumque in vel
            temporibus incidunt nihil alias. Officia libero est labore fuga, voluptates voluptatum nisi
            facere reprehenderit ab voluptas aliquam.</p>
    </div>
</section>
<section class="accordion">
    <button role="button">Accordion 2</button>
    <div class="content 2">
        <p>2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid sequi eveniet commodi rerum
            doloribus illum quaerat vitae id dignissimos nam neque repellendus, voluptatibus tempore
            sapiente officia rem! Laudantium, voluptatem deserunt?</p>
    </div>
</section>
<section class="accordion">
    <button role="button">Accordion 3</button>
    <div class="content 3">
        <p>3 Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem nisi eius doloribus, doloremque
            asperiores omnis repudiandae? Commodi culpa ipsa, enim sequi minus esse, natus, similique ad
            libero adipisci voluptatibus doloribus.</p>
    </div>
</section>

.accordion button {
    width: 100%;
    text-align: left;
    padding: 1rem 2rem;
    transition: .4s;
    color: #444;
    background-color: #eee;
}

.accordion button:hover {
    background-color: #ddd;
}

.accordion .content {
    background-color: #fff;
    padding: 1rem 2rem;
    display: none;
}

.accordion .content.show {
    display: block;
}


const buttons = document.querySelectorAll('.accordion button');
buttons.forEach(function (e) {
    e.onclick = function () {
        let content = e.nextElementSibling;
        let cotents = document.querySelectorAll('.accordion .content');
        cotents.forEach(function (c) {
            c.classList.remove('show');
        });
        content.classList.add('show');
    }
});