Skip to content
Adapt User's Guide version 4.5

Accordion

You can use the accordion component to present learners with a series of headings, which once selected, expand to reveal associated text.

  • Accordions can condense a list of terms and/or concepts into a smaller area.
  • Accordions isolate each concept and its explanation or definition, aiding retention.
  • If you need to present a list of terms which can stand alone as a piece of content, but which can also be explored in more detail, then accordions are a great choice.
  • The most used example of an accordion is the Frequently Asked Questions. Accordions allow the user to view only the options they are interested in.
  • The headings can be used to present the high level stages in the process which, once selected, provide a more extensive explanation of what happens at that specific point.
  • Accordions make great end-of-Page recaps. Each accordion item can correspond to a key piece of learning presented on the page. When this item is selected, a short summary of the learning point is provided.
  • Accordions can wrap headings fairly well but become extremely difficult to use if the heading is more than 3 or 4 lines on a mobile device.
  • Larger definitions may also force users of mobile devices to scroll the page repeatedly as the accordion expands and contracts
  • Accordions need at least 3 items to be effective.
  • Comparing and contrasting definitions can be tedious in an Accordion, especially when there are a large number of terms to compare.

The Accodion inherits all the settings common to the Presentation Components.

This is a list of the items in the accordion. When you click the Add button, a dialog will slide out from the right side of the screen allowing you to populate the accordion item. The fields in this dialog are:

SettingDescription
Item TitleThe heading the user should click to reveal more information.
Item BodyThis is the body text that is hidden until the item title is clicked on.
Graphic: AltThe alternative text for the graphic, if supplied.
Graphic: SrcOptional image which will be rendered below the body text.
Graphic: AttributionA line of text to be used to supply an attribution for the original artist if required by the license of the graphic.
ClassesUsed to add a custom HTML/CSS class to the accordion item. Should only be used with an Advanced theme at the direction of a developer.

Accordion Graphics

There is no specific size required to be used in an accordion. That said, there are some general guidelines that you should follow for best results.

Smaller images will be left-aligned to the item body. This may make your accordion item appear broken or less professional. Larger images will be scaled to fit within the accordion item body and will maintain their aspect ratio.

The Accordion item will show the entire graphic below the text, without cropping. This can create accordion items that are extremely large and hard to navigate, particluarly on desktop or if portrait images are used.

For best results, use a narrow landscape image.

Recommended Sizes

large accordion graphic
Download Large Accordion Template

In an accordion that is full-width, the recommended image size is 938px by 270px.

accordion small graphic
Download Small Accordion Template

In an accordion that is half-width (left or right) the recommended image size is 400px by 120px.

Again, the accordion will display an image of any height, so if you need a bit more height in the image to get your content across, Adapt will accept and display the image without issue, so long as the widths are observed.

If the image is important to your accordion, consider using the Graphic Accordion component instead. It has a special area devoted to the image for each item, but does require that all items have graphics.