Each widget is wrapped with a div.example, and the area it controls uses the class "details". Use the button to toggle content.
This is a short block of content that is revealed when the button is toggled. Buttons use aria-expanded and aria-controls to indicate state and target.
Interactive content stays focusable when visible:
You can focus the input when the details area is open.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, a blanditiis? Recusandae, eum quisquam, accusamus ipsum tempore maiores sequi ab dolore minima. Laboriosam, laborum voluptates? Quasi, quidem. Voluptatem, omnis neque.
Ut fringilla, ipsum eu volutpat sodales, lacus ex dictum sapien, sed dignissim sapien arcu vitae magna. Integer posuere, neque at gravida efficitur, lorem justo posuere purus, sed consequat elit arcu nec sapien.
Tip: the button is keyboard accessible (Enter / Space) and updates the aria-expanded attribute automatically via the script.