<h1>Detail and Summary</h1>

<h2>Read more about the wizarding schools:</h2>

<section>
	<details open>
		<summary>Beauxbatons Academy of Magic</summary>
		<p>
			If you like your magic served with a dash of savoir faire, this school is for you. Beauxbatons welcomes a multitude of students of different nationalities, mainly French, but also Spanish, Portuguese, Dutch, Luxembourgian and Belgian.
		</p>
	</details>

	<details>
		<summary>Durmstrang Institute</summary>
		<p>You’ll certainly hear a few interesting stories at Durmstrang, seeing as this is the school that Dark wizard Gellert Grindelwald was expelled from. </p>
	</details>

	<details>
		<summary>Ilvermorny School of Witchcraft and Wizardry
		</summary>
		<p>If you fancy living a Hogwarts-style life across the pond. The founder of Ilvermorny, Isolt Sayre, always wished she could go to Hogwarts, and the school definitely seems to embody some of its traditions. </p>
	</details>

	<details>
		<summary>Hogwarts School of Witchcraft and Wizardry
		</summary>
		<p>Because you love it. But also because of its detailed history, secret passages, eccentric professors, wisecracking ghosts, lovely house-elves, talking portraits and much, much more besides. Most importantly, Hogwarts seems to have a sense of humour
			about itself, and round every corner is a new delight. </p>
	</details>
</section>
/* Only for styling, not required for it to work */
body {
	background-color: lightsteelblue;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

h1 {
	font-size: 3rem;
	color: #fff;
	font-family: "Berkshire Swash", cursive;
	text-align: center;
}

h2 {
	font-size: 1.2rem;
	font-family: sans-serif;
	text-align: center;
}

details {
	margin-bottom: 20px;
	width: 100%;
	font-family: sans-serif;
}

details p {
	padding: 20px;
}

summary {
	padding: 20px;
	background-color: #9fb6ce;
	border: 1px solid #9fb6ce;
	outline: none;
}

summary:hover,
summary:focus {
	border: 1px solid lightslategray;
}

details[open] summary {
	background-color: lightslategray;
	border: 1px solid lightslategray;
}

details[open] {
	background: #fff;
}

section {
	max-width: 80%;
	width: 100%;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.