Details classes are created to enhance the native behaviors of <details>.
Use .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 >
Use .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 >
Use .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><details>
< 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 >