Information Services Division


Silva CMS: add an accordion

Accordions provide the user with 2 or more links with a title. When they click on the title, the link will open up and users can read the relevant information.

Accordions are particularly good if a user has to make a choice between different options or where a choice depends on a number of things.

E.g. you have 3 MScs on offer, but they have different modules each. By providing the user with an accordion, they can choose the MSc they are interested in, click on it and quickly scan the modules available.

This guide is aimed at...

  • Staff
  • IT Administrators

Before you start...

You will need to have Chief Editor, Editor or Author access in Silva;
You will need to have attended Silva training.

  1. Avoid using Internet Explorer when editing;
  2. Log on to the relevant website by adding /edit at the end of the web address or clicking on the small cross at the bottom of the page.


Adding an accordion is a 2-step process.

Step 1

  1. Ensure the page on which you want the accordion to be seen sits inside a Silva folder.
  2. Create a Silva folder and call it Accordion (ensure the id is in lowercase - the title can have a Capital 'A');
  3. Delete the index page;
  4. Create as many Silva documents as you need accordions inside the Silva Folder e.g. Admission, Fees, FAQs etc.;
  5. Publish the Silva documents;
  6. Hide the folder accordion in 'properties' so that it doesn't show up in the left-hand navigation!

Step 2

  1. Go to the page where you would like to show the accordion - remember this page has to sit within a Silva Folder and is usually an index page;
  2. Click on External source and choose: Includes: add an accordion;
  3. Click on add external source;
  4. Click on the get reference button to find the 'accordion' folder;
  5. Click on add external source
  6. Save and preview the page.
  7. Publish the page.

NB If you would like more than one accordion on a page, you will need to give each subsequent accordion a unique id e.g. accordion02, accordion03.

When clicking on the get reference button, choose the relevant accordion and put the same name i.e. accordion02 or accordion03  in the lower part of the external code source.

Failing that, only the first accordion will show.


  1. It is not good practice to have too many accordions;
  2. It is not good practice to make the text within an accordion too long;
  3. It is not good practice to embed other external code sources inside an accordion!

Related guides & other info

    Help & Support

    For further help and assistance you will need to contact web-support@ucl.ac.uk


    We are continually improving our site, so please provide us any feedback on this web page using the form below. It would also be really useful if we could discuss your feedback with you, so if you are happy to be contacted please include your UCL email address in 'Email' field below.

    Please note: We can only respond to UCL email addresses

    Help us improve this page