Questions or comments?
Plugin to enable the
.alert class to be used with the
summary elements. This allows the creation of alerts which can be collapsed by the user. The plugin uses Local Storage to enable the browser to remember the state of the alert (open or collapsed) when loading a page.
How to implement
To use collapsible alerts, your
summary block must have the following:
Use a valid
idattribute with a unique value. Reuse this value for all the pages where you want the state of the alert to be remembered. For example, if a user collapses the alert of
idvalue “alert-123” on page A and navigates to page B where the same alert with the
idvalue “alert-123” exists, the alert will already be collapsed upon loading the page.
openattribute for its default state to be open. Omitting the
openattribute will cause the default state of the collapsible alert to be closed.
summaryelement must have a class matching that of its children element for the pointer (the triangle) to have the correct size. For instance, when using an
summaryelement should have an
Finally, every collapsible alert should be contained within a
asideelement and have a heading for the
<section> <details class="alert alert-success" id="alert-success" open="open"> <summary class="h2"> <h2>Well done!</h2> </summary> <p>You successfully read <a href="#" class="alert-link">this important alert message</a>.</p> </details> </section>
Collapsible alerts plugin source code on GitHub
- Date modified: