XClose

Information Services Division

Home
Menu

Drupal CMS: Accordions

Learn to create an accordion in Drupal.

This guide is aimed at

  • Staff
  • PG Students

Before you start 

You need to be a Senior Editor, Editor or Author
When editing use Chrome, Firefox or Safari but NOT Internet Explorer

Instructions

Accordions provide the user with a list of links about a particular topic. Clicking on each link will show or hide the content associated with that link. See below for an example.

Sample accordion:

Sample link 01

Some text

Sample link 02

Some text

Please consider the pros and cons of using accordions in Drupal before you proceed! 

Pros:

  • they allow the user control over the content i.e. they can see more information if they want, when they want
  • they also make a page's content look less daunting
  • accordions are suitable when people need only a few key pieces of content on a single page

Cons:

  • they are not easy to manipulate e.g. adding a new link in the middle of the accordion won't work
  • they are not as easy to use on mobile devices such as smart phones
  • they are not great for accessibility

We would also like to point out that contrary to popular belief, search engines are happy with long pages as long as the text on the pages is clearly laid out, has headings and bullet points where relevant. And of course make sure you include key words in this headings and bullet points!

Another common mistake is to have accordions for information that needs to be given each year e.g. reports for the year 2016, 2017, 2018 etc. 
Editors often start by putting in the first year's information e.g. 2016, then when more and more years are added, they realise it's better to put the oldest year at the bottom. This means everything needs to shift and that's when using accordions becomes a real problem.

Accordions should also NOT contain too much information in each section nor should they have videos, tabs etc. in them.
 


A simple solution for giving information with different headings is to use anchors:

  1. Information 1
  2. Information 2
  3. Information 3

Information 1 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend dolor tortor, finibus sollicitudin felis tempor varius. Suspendisse imperdiet, leo at tincidunt maximus, metus est tincidunt est, id rhoncus ex dui nec nibh. Aenean vulputate lobortis est eget ullamcorper. Mauris sollicitudin accumsan velit id imperdiet. Aenean non diam tempus, pharetra purus nec, feugiat turpis. Aliquam ullamcorper feugiat condimentum. 

 

Information 2 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend dolor tortor, finibus sollicitudin felis tempor varius. Suspendisse imperdiet, leo at tincidunt maximus, metus est tincidunt est, id rhoncus ex dui nec nibh. Aenean vulputate lobortis est eget ullamcorper. Mauris sollicitudin accumsan velit id imperdiet. Aenean non diam tempus, pharetra purus nec, feugiat turpis. Aliquam ullamcorper feugiat condimentum. 

 

Information 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris eleifend dolor tortor, finibus sollicitudin felis tempor varius. Suspendisse imperdiet, leo at tincidunt maximus, metus est tincidunt est, id rhoncus ex dui nec nibh. Aenean vulputate lobortis est eget ullamcorper. Mauris sollicitudin accumsan velit id imperdiet. Aenean non diam tempus, pharetra purus nec, feugiat turpis. Aliquam ullamcorper feugiat condimentum. 

Create an accordion

  1. Go to the page where you want to create the accordion
  2. Ensure you are in editing mode and have the text for the links and the content ready to copy and paste
  3. Click on the 'accordion container' icon in the editing toolbar
  4. Replace the 'Title placeholder' with the name of the first link
  5. Replace the 'content placeholder' with the content for the first link
  6. With the cursor still at the end of the content you have just copied  / typed, click on the 'accordion item' icon
  7. Complete the title and its content - with the cursor at the end of the content...
  8. Click on the next 'accordion item' and complete the title and its content
  9. Continue clicking on 'accordion item' until you have all the links for the accordion and their content finished
  10. Depending on your role:
    if you are a Senior Editor: click on 'Publishing options - Draft (Current)' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Editor: click on 'Revision information' in the left-hand menu, choose 'published' from the drop-down menu
    if you are an Author: click on 'Revision information' in the left-hand menu, choose 'needs review' from the drop-down menu
  11. Save
  12. If you need to put the page in the menu, check the instructions for putting a page in the website's menu
  13. Finally, check you are happy with the result, including on a mobile device

Add new information to an existing accordion list

You may want to add information to an existing accordion. This needs to be done carefully so as not to create white space and / or a new accordion by mistake!

  1. Make sure you are in editing mode
  2. Place your cursor in the last 'Content Placeholder' before where you would like to add the item
  3. Press the Accordion item icon - the icon with one line
  4. Replace the 'Title Placeholder' and 'Content Placeholder' with the text you want to add
  5. Save and publish.

Help and support

web-support@ucl.ac.uk

Feedback

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