アコーディオン（JavaScript使用）

デモ

See the Pen accordion4 by logsuke (@design-list) on CodePen.

コード

<!-- Boxicons headタグ内へ -->
    <link href='https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css' rel='stylesheet'>

    <main>
        <section id="section1" class="section">
            <ul id="accordion">
                <li>
                    <div class="title">Open<i class='bx bx-plus'></i></div>
                    <div class="content">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus harum
                        molestias
                        praesentium, maxime, sunt, laudantium quibusdam officia nobis officiis eligendi fugit asperiores
                        eaque consequatur quos expedita. Repellendus animi nihil provident amet maxime eos quos natus
                        corrupti, deleniti fuga! Beatae facilis quis harum optio at porro ab esse vitae excepturi.
                    </div>
                </li>
                <li>
                    <div class="title">Open<i class='bx bx-plus'></i></div>
                    <div class="content">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus harum
                        molestias
                        praesentium, maxime, sunt, laudantium quibusdam officia nobis officiis eligendi fugit asperiores
                        eaque consequatur quos expedita. Repellendus animi nihil provident amet maxime eos quos natus
                        corrupti, deleniti fuga! Beatae facilis quis harum optio at porro ab esse vitae excepturi.
                    </div>
                </li>
                <li>
                    <div class="title">Open<i class='bx bx-plus'></i></div>
                    <div class="content">
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptates voluptatibus harum
                        molestias
                        praesentium, maxime, sunt, laudantium quibusdam officia nobis officiis eligendi fugit asperiores
                        eaque consequatur quos expedita. Repellendus animi nihil provident amet maxime eos quos natus
                        corrupti, deleniti fuga! Beatae facilis quis harum optio at porro ab esse vitae excepturi.
                    </div>
                </li>
            </ul>
        </section>
    </main>

/*=== Base ===*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --nav-height: 8rem;
    --max-width: 1024px;
    --container-padding: 0 4rem;
    --gap: 2rem;
    --bg-color: rgb(240, 240, 240);
    --first-color: rgb(172, 245, 255);
}


/*=== Font ratio ===*/

html {
    scroll-behavior: smooth;
    font-size: 62.5%;
}

body {
    font-size: 1.6rem;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

.section {
    width: var(--max-width);
    margin: 0 auto;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* accordion */

#accordion {
    width: 600px;
}

#accordion li {
    width: 100%;
    background: #ccc;
    padding: 1rem;
    border-radius: .5rem;
    margin: 1rem 0;
}

#accordion li .title {
    padding: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

#accordion li .title i {
    color: var(--first-color);
    padding: .5rem;
    cursor: pointer;
}

#accordion li input[name="accordion"] {
    display: none;
}

#accordion .content.toggle {
    max-height: 500px;
}

#accordion .content {
    padding: 0 1rem;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease-in-out;
}

const titles = document.querySelectorAll('.title');

titles.forEach(function (title) {
    title.addEventListener('click', function () {
        titles.forEach(function (title) {
            title.nextElementSibling.classList.remove('toggle')
            title.firstElementChild.classList.replace('bx-minus', 'bx-plus')
        })

        this.firstElementChild.classList.replace('bx-plus', 'bx-minus')

        this.nextElementSibling.classList.toggle('toggle')
    })
})