Expandable sections are great for progressive disclosure of content and can make a long look clear and simple.

The easiest way to add an expandable section is to add the HTML elements <details> and <summary> plus some custom CSS for the styling. You don’t need any JavaScript. Here is an example:

Toggle me, please

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis, sem eu tempor consequat, purus elit sagittis purus, sit amet venenatis libero tellus at eros. Phasellus imperdiet orci eget metus rutrum efficitur. Proin quam diam, luctus a libero eu, viverra tincidunt ligula. Nam arcu ipsum, tempus at fermentum sed, feugiat ut diam. Vivamus hendrerit cursus massa, eget pellentesque urna venenatis quis. Integer pulvinar porta ante, quis laoreet lorem pellentesque eget. Maecenas sed viverra erat. Morbi vehicula scelerisque placerat. Sed non ante sagittis, feugiat diam eget, iaculis ligula. 

Bridge the knowledge gap



Another popular method of adding expandable sections without JavaScript uses a checkbox. But don’t worry, it doesn’t look like a checkbox:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mattis, sem eu tempor consequat, purus elit sagittis purus, sit amet venenatis libero tellus at eros. Phasellus imperdiet orci eget metus rutrum efficitur. Proin quam diam, luctus a libero eu, viverra tincidunt ligula. Nam arcu ipsum, tempus at fermentum sed, feugiat ut diam. Vivamus hendrerit cursus massa, eget pellentesque urna venenatis quis. Integer pulvinar porta ante, quis laoreet lorem pellentesque eget. Maecenas sed viverra erat. Morbi vehicula scelerisque placerat. Sed non ante sagittis, feugiat diam eget, iaculis ligula. 

Bridge the knowledge gap

A section can also be visible by default. Click the heading to hide the content.