An accordion is a vertically stacked set of headers that expand to reveal, or collapse to hide, associated content when clicked or tapped.
Accordion components allow your readers to choose whether or not to 'see more' information about a topic, and are especially useful when there are multiple discrete pieces of information that an individual reader may only be interested in part of.
They are often used for content such as a set of 'Frequently Asked Questions', or 'Terms and Conditions', though can be useful for a broad range of other content too.
Accordions can be styled in multiple ways and can contain not just text, but also other media.
Adding an accordion
Add an accordion set (multiple pairs of headers and content blocks) to an existing section in your story by clicking the INSERT ACCORDION button in the toolbar that shows between content blocks:
This adds an accordion comprised of multiple pairs of default content that can then be edited and styled:
Editing and styling an accordion
Editing the text within an accordion works in the same way as editing text elsewhere in Shorthand. Select and delete or type-over existing text, or select text to show menus from which the font, size, colours, and style of the text can be changed.
The header section of each accordion pair can contain only text, while the content area also supports adding images, video, buttons, horizontal rules, spacers, charts, and more.
Changing appearance
The colour and shape of accordion components can be styled through a menu that appears at the top of each header section (this is also where accordion pairs can be deleted or copied/duplicated):
Accessing the accordion style menu
The style menu provides multipe options for changing the appearance of the accordion pairs or all pairs within a block.
The accordion style menu
Options include the shape of the pairs, colours, the indicators that signal to users that the headers can be clicked, and also whether those indicators appear to the left or right of the header. There are multiple shapes to choose from, and these also affect how colours and borders are applied. Some shapes contain borders, while others do not. Lastly, there's an option to choose whether the changes you make are applied to just the pair from which you accessed the menu, or to all the pairs in a content block. In this way it's easy to either style pairs independently or to make all the pairs look the same without having to adjust each individually.
Changing the style of a single accordion pair.
Changing the initial state and interaction
There are multiple ways an accordion can be first presented to your readers when a story first loads, and multiple ways for it to behave when readers interact with it.
These can be changed through the interaction menu that is accessed through a cog icon that appears at the top-left of the accordion set and affect the whole set of accordion pairs within the block.
The interaction menu for an accordion block
Options from this menu include choices for:
Whether pairs open and close independently or collectively (all at once) when a reader clicks them
The initial state of display: whether the story loads with all pairs closed, all open, or just the first pair open
Animation: whether clicking on a pair opens and closes it instantly, slowly, or quickly
Spacing: how close each pair in the block is to its surrounding pairs
Other examples
There are many ways to style an accordion component, and they can be added to many different section types. Examples can be found in the Accordion category of section templates when adding a new section to a story.
