How do I add expand/collapse (accordion) text to my site?

Summary

If you have a page (or a section of a page) that will contain a lot of text, then using expand/collapse text is one method of making that text easier to read/skim (bonus: our expand/collapse functionality is accessible!).


Expand/collapse text can make it easier for site visitors to read/skim your content to find what they need

Best Practices

  • Use expand/collapse text mindfully, and try not to over-use it. Expand/collapse text needs to be logically broken up by headings, and shouldn't be used on every page.
  • We recommend always adding the available Expand All/Collapse All option.

Instructions

Our Expand/Collapse guide page contains detailed instructions. Some key takeaways:

  • Using the expand/collapse functionality requires going into the HTML source. Therefore, only a Site Builder can add expand/collapse text. 
  • If you are unfamiliar with HTML, or have never modified HTML before, do not fret. The above page gives detailed instructions on how to add and use the expand/collapse functionality.
    • For example, on the guide page, we provide a sample chunk of HTML that you can copy and paste into the HTML source; once you've copied and pasted the sample, you can switch back to the standard editing view, and add in your real text from there.
  • If you run into any issues using this expand/collapse functionality, please do not hesitate to email web-platform@berkeley.edu, and we'd be happy to assist.