---
{
	"title": "Collapsible alerts",
	"language": "en",
	"category": "Plugins",
	"description": "Make alerts collapsible by users",
	"tag": "collapsible-alerts",
	"parentdir": "collapsible-alerts",
	"altLangPrefix": "collapsible-alerts",
	"dateModified": "2016-06-09"
}
---
<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>

<section>
	<details class="alert alert-info" id="alert-info" open="open">
		<summary class="h2">
			<h2>Heads up!</h2>
		</summary>
		<p>This <a href="#" class="alert-link">alert needs your attention</a>, but it's not super important.</p>
	</details>
</section>

<section>
	<details class="alert alert-warning" id="alert-warning" open="open">
		<summary class="h2">
			<h2>Warning!</h2>
		</summary>
		<p>Best check yourself, you're <a href="#" class="alert-link">not looking too good</a>.</p>
	</details>
</section>

<section>
	<details class="alert alert-danger" id="alert-danger" open="open">
		<summary class="h2">
			<h2>Oh snap!</h2>
		</summary>
		<p><a href="#" class="alert-link">Change a few things up</a> and try submitting again.</p>
	</details>
</section>
