Accordion
Accordion options
Scroll down to the “varied width content” area and click “add module.” This will open up a list of all the components. Select accordion and it will be added to the varied width content area.
Accordion title
The field is where to add the title or headline of the accordion. The title here can be styled but the text will be bolded by default. For titles Heading 2 is a great place to start.
Accordion description
The description block is where supporting text can be added to the accordion. Usually this would include a sentence or two describing what the accordion content is about.
Accordion background
The accordion background is a drop down with two options.
- Standard: Creates the accordion with a plain white background
- Decorative: Adds a hexagon pattern to the background for some extra visual interest.
Accordion Style
The “accordion 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: Allows the inclusion of icons to the beginning of the row title. If this option is selected, an additional option will appear in the Row options called “icon choice.” This is a search bar to search and select an icon from the icon library.
- Numbered: As expected, this option automatically numbers each row of the accordion.
Expand/Collapse All
The “expand/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 “yes.” This option is completely preference and can be omitted by choosing “no” which is selected by default.
Adding content
Accordion rows
The main content is added in the “accordion rows” section. Clicking the “add” button will present two options of what type of content we would like to add.
Row
The first option is “row” which is how to add an accordion row. Selecting this will bring up options to create a standard accordion row.
- 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 “icons” was selected previously. A search bar will appear to find and select an icon to be displayed at the begging of the row.
- Row content: The main content of the accordion row should be added into the row content field.
- Row anchor: There is an optional field at the end to add 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 that’s presented when “add” is selected is called “label.” This allows for the creation of a breakpoint in the accordion with the option of adding text. This can help group an accordion into segments.
- Sub heading: Choosing “label” will present only one field called “sub heading.” To label the area, add the text to the “sub heading” field. Leaving this field blank will simply create a dotted line break.
Example Accordion
This is an example accordion for a standard accordion style with a standard background.
Here is the content for row #1!
Here is the content for row #2!
Here is the content for row #3!
Sub heading
Here is the content for row #4!
Here is the content for row #5!
Here is the content for row #6!