HTML5 Details Element, with Styling

by Matthew Schenker

HTML

<h1>The details element</h1>

<details>
  <summary>Subaru</summary>
  <p>Subaru is an excellent car company, with a long-time reputation, especially with all-wheel drive.</p>
</details>
<details>
  <summary>Honda</summary>
  <p>Honda is a long-time, reliable car company, with a lineup of extremely reliable cars across numerous price-points.</p>
</details>
<details>
  <summary>Toyota</summary>
  <p>Toyotas are excellent cars, with a little touch of luxury about them, and some fun options for those wanting a little more.</p>
</details>

CSS

details {
	margin-bottom: 10px;
	background: #ccc;
	border: 2px solid #000;
	border-radius: 5px;
}

	details p {
		margin-left: 20px;
	}

summary {
	font-size: 1.2rem;
	color: green;
	font-weight: bold;
	padding: 10px 0 5px 5px;
	cursor: pointer;
	list-style-type: '+ ';
}

details[open] > summary {
  list-style-type: 'x ';
}

summary::marker {
	color: red;
	font-size: 1.2em;
}