Collapse

Animated collapse using HTML details.

Collapse
Show something

Code

<details class="blue-collapse">
    <summary>
        <header class="blue-collapse-header d-flex">
            <div class="blue-collapse-chevron" aria-hidden="true">&#10095;</div>
            Collapse
        </header>
    </summary>
    Show something
</details>

Element with class blue-collapse-chevron will be rotated to 90deg by default. But you can also customize the rotation target position with the CSS variable --blue-collapse-chevron-rotate:

Collapse
Show something

Code

<details class="blue-collapse">
    <summary>
        <header class="blue-collapse-header d-flex">
            Collapse
            <div class="blue-collapse-chevron" style="--blue-collapse-chevron-rotate: -90deg" aria-hidden="true">
                &#10094;
            </div>
        </header>
    </summary>
    Show something
</details>

Field group

Field group header

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Code

<details class="blue-collapse">
    <summary role="heading" aria-level="4">
        <header class="blue-collapse-header d-flex align-items-center gap-1 h2 blue-page-header">
            <svg
                xmlns="http://www.w3.org/2000/svg"
                width="1em"
                height="1em"
                fill="currentColor"
                aria-hidden="true"
                class="blue-collapse-chevron bi bi-chevron-right fs-6 opacity-50"
                viewBox="0 0 16 16"
            >
                <path
                    fill-rule="evenodd"
                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
                />
            </svg>

            Field group header
        </header>
    </summary>

    <p>
        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet,
        consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
        diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea
        takimata sanctus est Lorem ipsum dolor sit amet.
    </p>
</details>

Combine with styling of Menu Item

Parent

Code

<details class="blue-collapse">
    <summary class="btn blue-collapse-header blue-menu-item icon-link">
        Parent

        <span class="blue-btn-icon-wrapper">
            <svg xmlns="http://www.w3.org/2000/svg" class="blue-collapse-chevron" viewBox="0 0 16 16">
                <path
                    fill-rule="evenodd"
                    d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
                />
            </svg>
        </span>
    </summary>
    <div class="vstack border rounded-4">
        <button type="button" class="btn blue-menu-item">Child 1</button>
        <button type="button" class="btn blue-menu-item">Child 2</button>
    </div>
</details>

.blue-collapse-group let’s you group a collapse together with another UI element like a button that should come before the collapse summary.

Code

<div class="blue-collapse-group">
    <button type="button" class="btn blue-menu-item">Parent</button>
    <details class="blue-collapse">
        <summary class="btn blue-collapse-header blue-menu-item icon-link blue-btn-square">
            <span class="visually-hidden">Collapse sub menu</span>
            <span class="blue-btn-icon-wrapper" aria-hidden>
                <svg xmlns="http://www.w3.org/2000/svg" class="blue-collapse-chevron" viewBox="0 0 16 16">
                    <path
                        fill-rule="evenodd"
                        d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
                    />
                </svg>
            </span>
        </summary>
        <div class="vstack border rounded-4">
            <button type="button" class="btn blue-menu-item">Child 1</button>
            <button type="button" class="btn blue-menu-item">Child 2</button>
        </div>
    </details>
</div>

Code

<div class="bg-body-secondary py-4" style="width: 16.563rem">
    <div class="blue-collapse-group">
        <button type="button" class="btn blue-menu-item icon-link">
            <span class="blue-btn-icon-wrapper" aria-hidden="true">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
                    <path
                        d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882zM8 9.433 1.562 6 8 2.567 14.438 6z"
                    ></path>
                </svg>
            </span>
            Parent
        </button>
        <details class="blue-collapse">
            <summary class="btn blue-collapse-header blue-menu-item icon-link blue-btn-square">
                <span class="visually-hidden">Collapse sub menu</span>
                <span class="blue-btn-icon-wrapper" aria-hidden>
                    <svg xmlns="http://www.w3.org/2000/svg" class="blue-collapse-chevron" viewBox="0 0 16 16">
                        <path
                            fill-rule="evenodd"
                            d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"
                        />
                    </svg>
                </span>
            </summary>
            <div class="blue-collapse-indent vstack border-start">
                <button type="button" class="btn blue-menu-item">Child 1</button>
                <button type="button" class="btn blue-menu-item">Child 2</button>
            </div>
        </details>
    </div>
</div>

Grab the code

When you don't use the entire Blue Web library, you can also just copy and paste the required code into your own project.

  1. Copy and paste the following code into your project. Source: @/dist/styles/_collapse.scss
Edit post on GitHub