Three styles of expand/collapse widgets. Each widget is wrapped in a container with the class example, and every controlled content container uses the class details.
An expand/collapse widget lets users reveal additional information on demand. The native <details> element provides this behavior without extra JavaScript and is accessible by default.
details container.Profile details
This block is controlled by the button above. It uses hidden to collapse and the button's aria-expanded to reflect state.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque gravida aliquam nulla, vitae fermentum purus lobortis non.
Content for section one. Only one section is open at a time within this accordion.
Vivamus fringilla metus at arcu tristique, a venenatis arcu consectetur. Integer non arcu eu sem sodales bibendum.
Content for section two. Opening this will close other sections in the same widget.
aria-controls and aria-expandeddetails classContent for section three. This demonstrates a slightly longer block to show the layout.
Curabitur tincidunt, metus at molestie consectetur, sem neque cursus nulla, nec mollis sapien urna ut odio. Cras a lectus sapien.