This widget uses the browser's built-in expand/collapse mechanism. The summary acts as the toggle and the content appears below when expanded.
You can put any HTML content inside the details element.
This page demonstrates three expand/collapse widgets wrapped in an element with class "example". The container that holds the collapsible content uses the class "details".
This widget uses the browser's built-in expand/collapse mechanism. The summary acts as the toggle and the content appears below when expanded.
You can put any HTML content inside the details element.
This is a custom, accessible expand/collapse widget implemented with ARIA attributes. It uses a simple height animation to reveal or hide content.
This variant uses a checkbox to control visibility purely with CSS. When the checkbox is checked, the content is revealed without any JavaScript.