Accordion

Accordions expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

Initialize the block

An accordion is created by first inserting the UDS Accordion block onto the page and then “initializing” the block by clicking on the “Switch to Preview” icon in the toolbar.

The block will then be created with two inner blocks representing two initial sections within your accordion. The inner blocks within a UDS Accordion block are labeled UDS Foldable Card within the block inserter.

Accordion Block Options

The accordion “parent” block has one option that affects the behavior of the accordion as a whole. You can opt to have the accordion sections open and close independently of one another. Or you can choose to sync their behavior so that as one section opens, the other sections within the accordion close.

The default behavior of an accordion is to keep the sections N’Sync with each other.

Foldable Cards

Foldable cards are the individual content sections that collapse and expand within an accordion set. They can be filled with normal text, lists, headings and images.

  • Headlines within a content section should begin with an h4 tag to maintain the proper document structure for accessibility purposes.
  • A paragraph with the lead style applied makes for a good header tag substitute for more complex content needs.

Basic Options

Each content section should include a title. The title become a part of the clickable area to expand the content section below.

You may optionally include an icon within the content section title area.

  • Select an icon from the Font Awesome Icon library using the dropdown menu in the block settings panel.
  • All icons from Font Awesome Pro are included with the Pitchfork theme.
  • Icons defined elsewhere in the Unity project usually use the “normal” icon weight.

Content sections can have a highlight color other than the gold color that comes with the default card.

  • Select the background color for the foldable card in the options panel.
  • ASU Maroon, ASU Gold, ASU Gray 4 and ASU Gray 7 (Black) are the approved color choices for foldable cards.

Advanced Options

Foldable cards can be configured to be either expanded or collapsed upon the initial page load. The default setting is to load in the collapsed state.

Foldable cards can also be configured to stop expanding and collapsing at a certain breakpoint. This can allow for a better mobile presentation which emphasizes scrolling through accordion sections rather than interacting with the content directly. The default setting is to always enable card expansion and contraction.

Dimensions

Foldable cards are usually presented with a margin between each card for easier readability. However, if you are creating multiple sections of accordions on a single page you may elect to group related foldable cards together with no margin to create an “accordion section” on a certain topic.

By default there are no margins assigned to foldable cards. You may add the necessary margins for the default “spread apart” look in the dimentions panel of each foldable card.

  • The default margin for the “spread apart” look is the unit marked UDS Size 4 which is 2rem.

It is possible to select multiple blocks in the list view and set all of the margins at the same time. Use this trick to save some time when setting the margin for all foldable cards in an accordion

It is possible to select multiple blocks in the list view panel and set all of the dimensions of a set of blocks at the same time.
Use this trick to save some time when setting the margin for all foldable cards in an accordion.

Duplicating a Foldable Card

A popular workflow to add additional foldable cards to an accordion set is to use the Duplicate Block functionality within the block options menu. This correctly duplicates all block settings including the content, margins, selected icons and background color choices as a new block.

However, this action also duplicates a field that uniquely identifies each foldable card section on the page. A duplication of this unique ID leads to problems in which clicking on one foldable card can expand multiple cards at once.

The solution for this problem is to manually alter the foldable card ID field in the block settings panel to a new unique string.

  • The string can be a sequence of letters and numbers of any length.
  • It has no other intrinsic value other than to uniquely identify each foldable card.
  • A best practice to solve this problem would be to alter the existing set of digits by adding or deleting a random character from the sequence.

Best practices

Accordions expose content to users in a progressive manner. Allowing people to have control over the content by expanding it or deferring it for later lets them decide what to read and what to ignore.

But, you should also be aware that forcing people to click on headings one at a time to display full content can be cumbersome. If people need to open the majority of accordions to have their questions answered or to get the full story, an accordion may not be the best solution.