アコーディオン(縦・複数開閉)

デモ

See the Pen accordion1 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>
                    <label for="accordion1">Open<i class='bx bx-plus toggle'></i></label>
                    <input type="checkbox" name="accordion" id="accordion1">
                    <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>
                    <label for="accordion2">Open<i class='bx bx-plus toggle'></i></label>
                    <input type="checkbox" name="accordion" id="accordion2">
                    <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>
                    <label for="accordion3">Open<i class='bx bx-plus toggle'></i></label>
                    <input type="checkbox" name="accordion" id="accordion3">
                    <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 label {
    padding: 1rem;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
}

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

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

#accordion li input[name="accordion"]:checked + .content {
    max-height: 500px;
}

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