Recipe 13.4

Using a Disclosure Element

This demo uses the <details> element to show a toggle-able disclosure element. Click “More Info” to toggle the content.

Demo

More Info

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ex id dolor tempor tincidunt. Duis fermentum enim sapien, eu auctor massa efficitur quis. Vestibulum auctor turpis id ultrices finibus. Morbi ex mi, porttitor sit amet lacus vel, viverra tincidunt felis. Aliquam bibendum, nibh ut commodo dignissim, turpis purus imperdiet lacus, faucibus convallis metus neque sit amet risus. Nulla pharetra dui vel suscipit pretium. Etiam a euismod ante.

Code

JavaScript

/* No JS needed for this one! */

HTML

<details>
  <summary>More Info</summary>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eget ex id dolor tempor tincidunt. Duis fermentum enim
  sapien, eu auctor massa efficitur quis. Vestibulum auctor turpis id ultrices finibus. Morbi ex mi, porttitor sit amet
  lacus vel, viverra tincidunt felis. Aliquam bibendum, nibh ut commodo dignissim, turpis purus imperdiet lacus,
  faucibus convallis metus neque sit amet risus. Nulla pharetra dui vel suscipit pretium. Etiam a euismod ante.
</details>