Accordion

Wherever possible, you should make sure that all your web content is visible on the page and not hidden within expanding/contracting boxes.  

This makes it easier for users to find what they need, and makes important content or calls-to-action less likely to be missed.  

It is not helpful to hide key information from users when all of it might be relevant.  

If you think a page might be too long, you can divide your content into child pages, or put feature boxes and headings to good use.  

You can use an accordion when you have a long page of content that is all related to the page's overall purpose, but not all the content is relevant to all users. 

Small sections of content that are only relevant to some users should be added to different accordion items by topic, with a clear heading for each accordion item. 

This will make it easier for users to scan the page for the sections of content that they need, and will minimise scrolling and visual overwhelm by hiding long sections of text content.  

Below is an example of how you can use an accordion.

For detailed guidance on using accordions, go to our Wiki: