Page using accordions

This page demonstrates the accordion layout. Accordions are useful when you have a lot of content to fit into your page and you want to make sure it is easy to read. 

To add an accordion to your page on the intranet or the external site:

  • Open the page to which you want to add an accordion
  • Navigate in the folder structure down the left-hand side to the /SiteElements/Layouts/ folder
  • Click and drag the Accordion icon onto your page
  • To add another one, click and drag the Accordion icon to the red dotted line at the bottom of the previous one, and drop when you see 'Drop Here'.

You can add the accordion to your page multiple times as shown. Save and preview it and you will see that there are options to 'open all sections' and then 'close all sections'. These will appear automatically and are useful to visitors of your page.

An accordion with just text

This is some example accordion text.

This is another line of example accordion text.

An accordion containing a video

You can add a number of web controls into an accordion (found if you right-click in the accordion content area and hover over 'Insert Webcontrol'), such as the quotation control and the YouTube embed control. However, please consider the nature of the content before you add it in.

If you have a promotional video on the external website, you probably want to make it prominent on your page, rather than hiding it in a content cupboard. Whereas if you have a 'how to' video in the Intranet, visitors to the page can choose whether or not they need or want to watch it.

What makes a good personal statement?

An accordion containing a quote

Sarah

University of Birmingham staff member

“I love working on campus - it has a great atmosphere, especially during term time when the students are here.”

 

Colleges

Professional Services