Wrap each widget in an element with class "example". The collapsible content container uses class "details".
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet.
Duis sagittis ipsum id arcu. Praesent mauris. Fusce nec tellus sed augue semper porta. Mauris massa. Vestibulum lacinia arcu eget nulla.
Tip 1: Keep sections concise. Tip 2: Provide a clear summary in the header. Tip 3: Use ARIA attributes to announce state changes to assistive tech.
This widget uses a simple height animation. When opened, the content container's max-height is set to the content's scrollHeight, which creates a smooth expand effect. Closing sets max-height back to 0.
Implementation notes: avoid using CSS-only height transitions for unknown content height; JavaScript helps compute dynamic heights for a clean animation.