Collapsible Content With <details> and <summary>

How can a page offer extra information without making every reader scroll past it? The lemon cake recipe gets questions from its readers: can the butter be replaced with oil, how long does the cake keep, can it be frozen. Most readers only need one answer, or none. HTML has a pair of elements for exactly this case: a line of text the reader can click to show or hide the content below it, with no JavaScript required.

A single collapsible answer

<details>
  <summary>Can I freeze the cake?</summary>
  <p>Yes

.....

Like the course? Get enrolled and start learning!

Reading Progress

0%

Vote for new content