Details classes are created to enhance the native behaviors of <details>
.
Fullscreen click areaUse .details-overlay
to expand the click area of <summary>
to cover the full screen, so user can click anywhere on a page to close <details>
.
< details class = " details-overlay " >
< summary class = " btn " > More </ summary >
< div class = " border p-3 mt-2 " > Hidden text </ div >
</ details >
Darkened fullscreen click areaUse .details-overlay-dark
darken the click area overlay. Useful for modals.
< details class = " details-overlay details-overlay-dark " >
< summary class = " btn " > More </ summary >
< div class = " position-relative color-bg-default rounded p-3 mt-2 " style = " z-index : 112 ; " >
Hidden text
</ div >
</ details >
Custom caretUse .details-reset
to remove the default caret (that little triangle on the left). You then can add the .dropdown-caret
on the right of the text.
< details class = " details-reset " >
< summary class = " btn " > More < span class = " dropdown-caret " > </ summary >
< div class = " border p-3 mt-2 " > Hidden text </ div >
</ details >
You can add .btn
and .btn-*
classes to any
<summary>
element so that it gains the appearance of a button, and
selected/active styles when the parent
<details>
element is open.
< details >
< summary class = " btn btn-primary " > More </ summary >
< div class = " border p-3 mt-2 " > Hidden text </ div >
</ details >
< details class = " details-reset mt-3 " >
< summary class = " btn-link " > More < span class = " dropdown-caret " > </ summary >
< div class = " border p-3 mt-2 " > Hidden text </ div >
</ details >