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>

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