Graphic Accordion

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

Because the Graphic Accordion has a graphic on the right, it must be full-width and cannot be placed on the left or right. Also keep in mind that you will need a “default” graphic in addition to one graphic for each item.

• Graphic Accordions can condense a list of terms and/or concepts into a smaller area.
• Graphic 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 Graphic Accordions are a great choice.
• 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.
• Graphic 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.

• Graphic Accordions drop the images on mobile devices. This means that if the graphic is important to the concept, mobile users will not see them.
• Graphic 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
• Graphic 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.
• Graphic Accordions require images.

The Graphic Accordion component inherits all the settings common to the Presentation Components.

The alternative text for the default image.

The image displayed when no accordion item is expanded.

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:

The images in a Graphic Accordion are width-constrained. As such, the images can be any height your content requires but must meet the minimum width.

Images should be 482px wide. Larger images will be scaled down to fit the available area.

More important, all images used in the graphic accordion must be the same size and aspect ratio. Having images of differing sizes will create odd gaps where the underlying image shows through below the current image or the image may extend outside the component.