Collapsible alerts

Purpose

Plugin to enable the .alert class to be used with the details/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.

Working example

• English examples
• French examples

How to implement

To use collapsible alerts, your details/summary block must have the following:

• The details element must:

  • Use a valid .alert class:
    e.g. alert alert-success.

  • Have an id attribute 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 id value “alert-123” on page A and navigates to page B where the same alert with the id value “alert-123” exists, the alert will already be collapsed upon loading the page.

  • Have an open attribute for its default state to be open. Omitting the open attribute will cause the default state of the collapsible alert to be closed.

• The summary element 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 h3 element, the summary element should have an h3 class.

• Finally, every collapsible alert should be contained within a section or aside element and have a heading for the summary element's child.

<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>

Source code

Collapsible alerts plugin source code on GitHub