Accordions (aka "Accordion Item")


Accordions allow you to present information behind drop down windows that a user has to open in order to view. These are handy when you have a lot of information to include on a page, but you don't want the page to be too long and confusing for the user. 


Here's an example of an Accordion in use on the Payroll web page: https://www.lesley.edu/payroll


The time card due dates and pay dates are "hidden" in the accordion and users see them when they click on the arrow on the right.


screenshot of accordions in Drupal


How to Create an Accordion


  1. Log into Drupal and find the web page you want to edit, then select New Draft.
  2. Click on the drop-down window that has "Add Text" as the default. This is how you add all patterns, and some content types. (Review how to do this here.)
  3. Choose "Add Accordion Item."
  4. You can skip the Title field at the top of the Accordion.
  5. In the Teaser field, introduce the information that will follow (usually a few sentences).
  6. For the first Accordion window, you'll need a Title field. In the example above, "Spring 2018 Due Dates & Pay Dates" is written in the Title Field.
  7. In the Text field, put the information you want hidden until someone clicks on the arrow to open the Accordion. In the above example, you'll see the pay periods, dates when time cards are due, etc. in a table within the Text field.
  8. When in the Accordion block, click "Add Accordion Item" each time you want to create a new drop-down window in the same block. For each one, populate the Title field and the Text field.
  9. Save and Publish the page, if you have the permissions. Or, Save and Request Review. (Review this article on how to Save and Request Review.)


If you want to move the position of the entire Accordion on the web page, just drag and drop they whole thing with your mouse. If you want to remove a window within an Accordion, click on the "Remove" button to the right of that section's title. Be careful not to hit the Remove button on the top of the whole Accordion--that will delete the whole thing, instead of just one section.


The Back End of an Accordion in Drupal


Here's a section of the Payroll page's Accordion Item, on the back end, so you can see which fields you need to populate.


screenshot of accordion list on the back end