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">❯</div>
Collapse
</header>
</summary>
Show something
</details>Element with class blue-collapse-chevron will be rotated to 90deg by default and if it is the first child.
If it’s the last child it will rotate to -90deg. Since text nodes aren’t considered as child elements, you should wrap your text around an element.
<span>Collapse</span> in this case:
Collapse
Show something
Code
<details class="blue-collapse">
<summary>
<header class="blue-collapse-header d-flex">
<span>Collapse</span>
<div class="blue-collapse-chevron" aria-hidden="true">❮</div>
</header>
</summary>
Show something
</details>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: -45deg" aria-hidden="true">
❮
</div>
</header>
</summary>
Show something
</details>Combine with styling of Menu Item
Code
<details class="blue-collapse">
<summary class="blue-collapse-header blue-menu-item btn">
<span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
<span class="blue-menu-item-label">Parent</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
fill="currentColor"
class="blue-menu-item-dropdown-toggle blue-collapse-chevron blue-menu-item-chevron ms-auto"
style=" display: inline-block; vertical-align: -0.125em; transition: transform 0.2s;"
viewBox="0 0 16 16"
>
<path
class="blue-sidebar-exception"
fillRule="evenodd"
d="M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0"
></path>
</svg>
</summary>
<div class="blue-menu-item-dropdown text-body" style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)">
<button type="button" class="blue-menu-item btn">
<span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
<span class="blue-menu-item-label">Child</span>
</button>
<button type="button" class="blue-menu-item btn">
<span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
<span class="blue-menu-item-label">Child 2</span>
</button>
</div>
</details>Menu Item and Collapse grouped
.blue-collapse-group let’s you group a collapse together with another UI element like a button that should come before the collapse summary.
Collapse sub menu
Code
<div class="blue-collapse-group">
<button type="button" class="blue-menu-item btn">
<span class="blue-menu-item-icon" aria-hidden="true">☀️</span>
<span class="blue-menu-item-label">Parent</span>
</button>
<details class="blue-collapse">
<summary class="blue-collapse-header blue-menu-item btn">
<span class="visually-hidden">Collapse sub menu</span>
<svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
fill="currentColor"
class="blue-menu-item-dropdown-toggle blue-collapse-chevron blue-menu-item-chevron ms-auto"
style=" display: inline-block; vertical-align: -0.125em; transition: transform 0.2s;"
viewBox="0 0 16 16"
>
<path
class="blue-sidebar-exception"
fillRule="evenodd"
d="M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0"
></path>
</svg>
</summary>
<div class="blue-menu-item-dropdown text-body" style="--blue-menu-item-dropdown-bg: var(--bs-body-bg)">
<button type="button" class="blue-menu-item btn">
<span class="blue-menu-item-icon" aria-hidden="true">🌍</span>
<span class="blue-menu-item-label">Child</span>
</button>
<button type="button" class="blue-menu-item btn">
<span class="blue-menu-item-icon" aria-hidden="true">🌑</span>
<span class="blue-menu-item-label">Child 2</span>
</button>
</div>
</details>
</div>
Code
<div class="bg-body-secondary py-4" style="width: 16.563rem">
<div class="blue-collapse-group blue-sidebar-visible-on-open">
<div class="blue-menu-item-wrapper blue-menu-item-wrapper-208d4903-3a8c-4e7b-9b27-ba27782210f8">
<button type="button" class="blue-menu-item btn">
<span class="blue-menu-item-icon " aria-hidden="true"
><svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 10240 10240"
class="o-collection-icon"
width="1em"
height="1em"
fill="currentColor"
>
<path
fill=""
d="M1280 640l5230 0c352,0 656,126 905,375l1170 1170c249,249 375,553 375,905l0 6510 -7680 0 0 -8960zm5760 960l0 960 960 0 -960 -960zm-5120 -320l0 7680 6400 0 0 -5440c0,-176 -144,-320 -320,-320l-1600 0 0 -1600c0,-176 -144,-320 -320,-320l-4160 0z"
></path></svg></span
><span class="blue-menu-item-label text-truncate ">Filter & Controls</span>
</button>
</div>
<details class="blue-collapse " open="">
<summary class="blue-collapse-header blue-menu-item btn ">
<span class="blue-menu-item-label text-truncate visually-hidden">Öffnen</span
><svg
xmlns="http://www.w3.org/2000/svg"
width="1em"
height="1em"
fill="currentColor"
class="blue-menu-item-dropdown-toggle blue-collapse-chevron blue-menu-item-chevron ms-auto"
aria-hidden="true"
style=" display: inline-block; vertical-align: -0.125em; transition: transform 0.2s;"
viewBox="0 0 16 16"
>
<path
class="blue-sidebar-exception"
fillrule="evenodd"
d="M11.354 1.646a.5.5 0 010 .708L5.707 8l5.647 5.646a.5.5 0 01-.708.708l-6-6a.5.5 0 010-.708l6-6a.5.5 0 01.708 0"
></path>
</svg>
</summary>
<div class="d-flex flex-column border-start position-relative ms-3">
<a href="#" class="blue-menu-item btn" rel=""
><span class="blue-menu-item-label text-truncate ">Listen</span></a
>
<a href="#" class="blue-menu-item btn" rel=""
><span class="blue-menu-item-label text-truncate">Ablage von Filtercontrols in XAML</span></a
>
</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.
-
Copy and paste the following code into your project. Source: @/dist/styles/_collapse.scss