<article>
    <h1>Flexbox Accordion</h1>
    <div class="accordion">
        <section class="accordion--el el-1 open">
            <div class="accordion--el-title">
                <h2>Sezione #1</h2>
            </div>
            <div class="accordion--el-content">
                <p>Contenuto sezione #1</p>
            </div>
        </section>
        <section class="accordion--el el-2">
            <div class="accordion--el-title">
                <h2>Sezione #2</h2>
            </div>
            <div class="accordion--el-content">
                <p>Contenuto sezione #2</p>
            </div>
        </section>
        <section class="accordion--el el-3">
            <div class="accordion--el-title">
                <h2>Sezione #3</h2>
            </div>
            <div class="accordion--el-content">
                <p>Contenuto sezione #3</p>
            </div>
        </section>
    </div>
</article>

article {
    max-width: 350px;
    margin: 64px auto;
}

.accordion {
    display: flex;
    flow: row nowrap;

    &--el {
        position: relative;
        display: inline-flex;
        flex: 3 3 100%;
        height: 200px;
        min-width: 48px;
        border: 1px solid grey;
        overflow: hidden;
        transition: flex 0.75s ease-in-out;

        &-title {
            display: inline-flex;
            justify-content: center;
            width: 48px;
            background-color: lightgrey;

            & h2 {
                height: 32px;
                margin: 0;
                transform: rotate(-90deg);
                transform-origin: 80% 140% 0;
                white-space: nowrap;
                line-height: 1;
            }
        }
        &-content {
            display: inline-flex;
            margin: 16px;
            width: 100%;
            min-width: 450px;
        }

        &.open {
            flex: 3 1 100%;
        }
    }
}

var accordionEl = document.querySelectorAll(".accordion--el");

accordionEl.forEach((element) =>
    element.addEventListener(
        "click",
        function (e) {
            let accordion = this.parentNode;
            let openEl = document.querySelectorAll(".open");

            e.currentTarget.classList.add("open");

            for (let i = 0; i < openEl.length; i++) {
                if (openEl[i] != e.currentTarget) {
                    openEl[i].classList.remove("open");
                }
            }

            element.stopPropagation;
        },
        false
    )
);