XClose

Information Services Division

Home
Menu

Drupal CMS: Accordions

Learn to create an accordion in Drupal.

Before you start

When editing use Chrome, Firefox or Safari but NOT Internet Explorer

About accordions

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 smartphones

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 keywords in the 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 tables, videos, images, 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. Save
  11. 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

Feedback

We are continually improving our website. Please provide any feedback using the feedback form.

Please note: This form is only to provide feedback. If you require IT support please contact the IT Services Help desk. We can only respond to UCL email addresses.

Give feedback