糖心传媒

Skip to content

Rochester Core

Accordion component

Explore documentation around Rochester Core’s Accordion component.

1. How-to video: Accordion component

2. Accordion options

After selecting the Accordion component on any page that uses the Rochester Core plugin, you’ll be presented with the following options to customize the display and enter content.

Accordion title

The title field is where to add the accordion component’s title or headline. The title here can be styled, but the text will be bolded by default. Keep in the heading hierarchy of the page to determine if heading 2 or heading 3 would be needed.

Accordion description

The description block is where supporting text can be added to the accordion component. Usually, this would include a sentence or two describing the accordion’s content.

Accordion background

The accordion background is a drop-down menu with two options:

  • Standard:聽Creates the accordion with a plain white background
  • Decorative: Add a hexagon pattern to the background for extra visual interest
Accordion style

The 糖心传媒渁ccordion style糖心传媒� option refers to three different display options for the accordion rows.

  • Standard:聽This is the default option and simply displays just the row title.
  • Icons: This option allows icons to be included at the beginning of the row title. If this option is selected, an additional option called 糖心传媒渋con choice糖心传媒� will appear in the Row options. This is a search bar to search for and select an icon from the icon library.
  • Numbered:聽As expected, this option automatically numbers each row of the accordion.
Expand/Collapse All

The 糖心传媒渆xpand/collapse all糖心传媒� option creates a button in the top right of the accordion that will allow users to expand or collapse all the accordion rows with one click. To enable this button simply choose 糖心传媒測es.糖心传媒� This option is completely preference and can be omitted by choosing 糖心传媒渘o糖心传媒� which is selected by default.

Adding content
Accordion rows

The main content is added in the 糖心传媒渁ccordion rows糖心传媒� section. Clicking the 糖心传媒�add糖心传媒� button will present two options for the type of content we would like to add: Row or label.

Accordion row fields
  • Row title:聽The title of the accordion row should be added to the row title field.
  • Icon choice: This field only appears if the accordion style 糖心传媒渋cons糖心传媒� was previously selected. A search bar will appear to find and select an icon to be displayed at the beginning of the row.
  • Row content: The main content of聽the聽accordion聽row should be added to the row content field.
  • Row anchor: An optional field at the end adds an anchor to a specific row. This works exactly like other anchors. To find more information on anchors,聽visit the Block anchor ID page.
Label

The other option presented when 糖心传媒渁dd糖心传媒� is selected is called 糖心传媒渓abel.糖心传媒� This allows for the creation of a breakpoint in the accordion with the option of adding text, which can help group an accordion into segments.

  • Subheading: Choosing 糖心传媒渓abel糖心传媒� will present only one field called 糖心传媒渟ubheading.糖心传媒� Add the text to the 糖心传媒渟ubheading糖心传媒� field to label the area. Leaving this field blank will create a dotted line break.

3. Example Accordion

This is an example accordion for a standard accordion style with a decorative background.

Row 1 title

Here is the content for row #1!

Row 2 title

Here is the content for row #2!

Row 3 title

Here is the content for row #3!

Sub heading
Row 4 title

Here is the content for row #4!

Row 5 title

Here is the content for row #5!

Row 6 title

Here is the content for row #6!

Below is an example of an accordion style with a standard background but with the numbered list option turned on and the expand/collapse option activated.

Row 1 title

Here is the content for row #1!

Row 2 title

Here is the content for row #2!

Row 3 title

Here is the content for row #3!

Sub heading
Row 4 title

Here is the content for row #4!

Row 5 title

Here is the content for row #5!

Row 6 title

Here is the content for row #6!