Collapsible alerts

Questions or comments?

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

How to implement

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

<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

Date modified: