Expand/collapse widget examples
These examples use the native <details> and <summary> elements for predictable keyboard support and clear semantics.
You can activate the summary with Enter or Space.
Example 1: Show more information
Show shipping and returns information
We ship within 2–4 business days. Returns are accepted within 30 days if the item is in its original condition.
- Shipping updates are sent by email.
- Refunds are issued to the original payment method.
- If you need an accessible format for your receipt, contact support.
Tip: Use the links below if you prefer a separate page.
Links in this section are optional and do not affect expanding or collapsing the panel.
Example 2: FAQ-style accordion (independent items)
Each question can be expanded or collapsed independently.
What information is saved when I expand an item?
Expanding an item does not save personal information. It only shows or hides content on the page.
Can I use a keyboard to operate this?
Yes. Tab to a question, then press Enter or Space to expand or collapse it.
How do I close an expanded item?
Activate the same question again to collapse it. If multiple items are open, you can collapse each one the same way.
Additional reading (for context)
This section exists to give the links in Example 1 a destination. It is not part of the expand/collapse widget.
Support
If you need help, you can reach support through your organization’s usual channels.