Details (Accordion)
Use the details component to make content expandable and collapsible. This helps users scan pages and find information more easily.
Default Details
The details component uses the native HTML <details> element with enhanced styling.
Help with nationality
If you're not sure about your nationality, try to find out from an official document like a passport or national ID card.
We need to know your nationality so we can work out which elections you're entitled to vote in. If you cannot provide your nationality, you'll have to send copies of identity documents.
<details class="details">
<summary class="details-summary">Help with nationality</summary>
<div class="details-content">
<p>If you're not sure about your nationality...</p>
</div>
</details>Open by Default
Use the open attribute to show the content expanded by default.
What documents do I need?
You'll need to provide:
- A valid passport or national ID card
- Proof of address dated within the last 3 months
- A recent passport-style photo
<details class="details" open>
<summary class="details-summary">What documents do I need?</summary>
<div class="details-content">...</div>
</details>Multiple Details (Accordion Group)
Stack multiple details components to create an FAQ-style accordion.
How do I apply for a passport?
You can apply for a passport online. The process takes about 10 minutes and you'll need a digital photo.
How long does it take to get a passport?
Standard applications take up to 6 weeks. Express service is available for an additional fee and takes 1 week.
How much does a passport cost?
An adult passport costs £75.50. Child passports cost £49.00. Express processing adds £50 to these prices.
<details class="details">
<summary class="details-summary">How do I apply for a passport?</summary>
<div class="details-content">...</div>
</details>
<details class="details">
<summary class="details-summary">How long does it take?</summary>
<div class="details-content">...</div>
</details>
<details class="details">
<summary class="details-summary">How much does it cost?</summary>
<div class="details-content">...</div>
</details>With Rich Content
The content area can contain any HTML elements including lists, tables, and images.
Fee schedule
| Service | Standard | Express |
|---|---|---|
| Adult passport | £75.50 | £125.50 |
| Child passport | £49.00 | £99.00 |
<details class="details">
<summary class="details-summary">Fee schedule</summary>
<div class="details-content">
<table class="table">...</table>
</div>
</details>When to Use Details
Use details for:
- Frequently asked questions (FAQs)
- Additional help or guidance
- Optional information that not all users need
- Long content that would overwhelm the page
Don't use details for:
- Critical information that all users need
- Primary navigation
- Very short content (just show it)
- Hiding poor content structure
Usage Guidelines
Do
- Write clear, descriptive summary text
- Keep the number of accordion items manageable (5-10 max)
- Consider showing the most important item open by default
- Make sure content works when JavaScript is disabled
Don't
- Don't hide important information in accordions
- Don't nest accordions within accordions
- Don't use for primary content
- Don't force users to open multiple items to complete a task
Accessibility
- Uses native HTML
<details>and<summary>elements - Works without JavaScript
- Keyboard accessible (Enter/Space to toggle)
- Screen readers announce expanded/collapsed state
- Focus state is clearly visible
CSS Classes
/* Container */
.details { }
/* Summary (clickable header) */
.details-summary { }
/* Content area */
.details-content { }