Using collapsible panels

Collapsible panels…

…can be a very powerful way to put content on your page that does not get in the way all the time.

I'm only here if you need me.

However, as you can see from this awkward example, they are very easy to misuse.

Before you use collapsible panels

There are two articles you can read if you are going to make extensive use of the collapsible panels (often known as accordions).

In summary these say:

  • Collapsible panels add complexity to the site - confusing some users and affecting accessibility and usability (printing is also a problem)
  • You don't need to hide stuff to keep pages short - users will scroll and are not put off by pages with a lot of content
  • Don't use collapsible panels where users really need to see the content - allow them to read it without having to work out how to show it
  • Collapsible panels can be useful to allow secondary content to be shown by choice while building a page that has the main content exposed
  • Google will reduce the importance of text inside collapsible panels
  • Google snippets (the text you see below each search result) will not show hidden text meaning even if this text causes the page to be listed, users will not necessarily know why and are therefore less likely to click on the result

So, assuming you have evaluated all the pros & cons and a collapsible panel is appropriate, how do you use them?

Adding a collapsible panel

  1. Add a blank line and hit the "insert template" button [insert template]
  2. A pop-up appears with "collapsible panel" chosen by default
    (It's the only template we currently have)
    The image is a preview so you can do nothing on the pop-up except click OK to insert the collapsible panel.
    insert template: collapsible
  3. The collapsible panel will appear as an editable region in your text editor
    collapsible panel - empty
  4. It should now be a simple matter to edit the panel header and content to produce the panel - however there are pitfalls you need to be aware of:
    • Panels will always add extra empty lines above & below themselves - this can make the page look wierdly spaced so you may want to remove them
    • Editing the header on Internet Explorer sometimes needs a double click to activate
    • It is possible to delete too much text which will shift content into the header or the header out of the collapsible panel in into the general text above it and even text from below the panel into it - this can be a very confusing effect so be careful
      (& remember [Ctrl]+[Z] will reverse the last action)
    • Some of these editing actions will leave the panel in an unusable state, even invisible with no way to open it
    • You cannot nest collapsible panels within other collapsible panels
  5. Experiment with editing the header and content carefully until you are sure you know all the foibles of of the collapsible panel and remember:
    • You can change the header from "Heading 2" to any other paragraph style to suit your page
    • Don't try to add a link in the header - it won't work
    • The content can contain anything you would put on a page including links, headings and images
    • If you use headings inside the collapsible panel, they must be consistent with the rtext around the panel - don't put higher level headings inside a panel with a paragraph or lower level heading as the header

Help us improve Gloucestershire County Council

Don’t include personal or financial information like your National Insurance number or credit card details.