HTML5 <details> Tag example

This is a simple example for HTML5 <details> tag element

HTML

<body>
<section>
	<details>
		<summary>Lorem ipsum dolor sit amet</summary> 
		<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam fringilla leo id mauris viverra, in egestas sapien tristique. Sed at ornare felis, quis rutrum nisi. Aenean cursus lacus ac eros sagittis pharetra. Nullam in pretium ligula. Donec ullamcorper eros non gravida tincidunt. Nullam nec nisi a tortor feugiat adipiscing id quis nisi. Vivamus et bibendum ligula. Proin eget auctor odio. Morbi congue feugiat justo, at varius lectus tincidunt a.</p>
	</details>
	<details>
		<summary>Phasellus quis dui eu dolor</summary> 
		<p>Phasellus quis dui eu dolor fringilla imperdiet. Curabitur iaculis metus a orci blandit volutpat. Nam imperdiet massa nec ipsum laoreet, ut pellentesque ante mattis. Aenean et tempus urna. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi consequat vehicula odio. Nullam tristique dui eu augue semper, non posuere ipsum tristique. Ut vel dolor interdum, pulvinar felis ac, venenatis diam. Integer eu magna et risus dictum viverra.</p>
	</details>
	<details>
		<summary>Sed nisl odio, semper fermentum</summary> 
		<p>Sed nisl odio, semper fermentum dui et, tincidunt laoreet justo. Maecenas a neque vitae libero iaculis sodales sed mollis risus. Phasellus velit nulla, sollicitudin id augue eget, laoreet rutrum enim. Mauris convallis pretium rutrum. Pellentesque ultrices nisi eu nulla ultrices, non vehicula purus suscipit. Ut cursus lorem ut ligula fringilla, vel tincidunt massa vulputate. Nullam ut lobortis neque, in sodales diam.</p>
	</details>
	<details>
		<summary>Etiam auctor, tortor eu hendrerit</summary> 
		<p>Etiam auctor, tortor eu hendrerit scelerisque, orci leo aliquam enim, in cursus nunc metus sed ipsum. Fusce vel risus vitae odio auctor porttitor et non leo. Nullam congue, risus eu ultricies vehicula, purus erat sodales dolor, in semper nibh ligula eget odio. Curabitur vulputate consequat turpis eleifend tincidunt....

CSS

details {
	margin: 5px;
}

details > summary {
	border: 1px solid black;
	padding: 10px 5px;
	margin: 1px;
	background-color: #d3f0fb;
}

details > p {
	margin: 1px !important;
	padding: 5px 20px;
	border: 1px solid black;
	background-color: #ebf6fb;
}