Multi-level Accordion - complex example
Multiple levels of details/summary elements configured to allow only one details, of a set, to be open at a time.
Can be opened, to any depth, from the URL via a hash of the details id.
Example
1. Choose a Category
Mobile & Online Banking
2. Choose a topic
How to get started
3. Choose an option
Register for Online Banking
Content
Content as required
Banking on your mobile or tablet
Content
Content as required
Banking on your computer
Content
Content as required
Making a payment
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Manage your account online
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Cards & PINs.
2. Choose a topic
Topic 1.
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Topic 2.
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Topic 3.
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Payment enquiries
2. Choose a topic
Topic 1.
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Topic 2.
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Topic 3.
3. Choose an option
Option 1
Content
Content as required
Option 2
Content
Content as required
Option 3
Content
Content as required
Features
Using the attribute name, with the same value, across a set details elements will allow only one of them to be open at a time.
The name value may be shared across a single set of details, or across multiple sets.
This demo uses the same name value across:
- all level 1 categories (3 of them),
- all level 2 topics (9 of them),
- all level 3 options (27 of them).
Which appeared, to me at least, to have the best UX.
Do you have simpler requirement? See: Simple dropdowns (accordion) with details/summary