Accordion

When to use

Accordions can be used to nest/conceal further information about a topic. Accordions allow the user to browse through a list of content and click to expand on a topic of interest, making the information easier to browser through.

Attributes

Required Attributes

• id: a single id is shared between the accordion and the panes contained inside of it.
• number: an individual number to identify each accordion pane inside the accordion
• title: the title for the accordion pane

Optional Attributes

• open = “true” OR “false”: determines whether the panel will be open or close on page load. Default value is false.

Basic usage

An accordion is a sort of pane that contains collapsible panes inside of it. When clicked on the panes inside the accordion reveal any information contained inside their respective tags. Below are the steps demonstrating how to use each element and attribute of the accordion shortcode.

Steps

1. Accordion ID
   [accordion id="accordion1"]

   The ID of the accordion is used by its inner panes in order to tie their functionality with the accordion they belong to. It doesn’t matter what it is called as long as the id is unique, and the panes within that accordion use that accordion’s unique id.

2. Accordion pane
   [accpane title="Example title" id="accordion1" number="1" open="1"]
3. Content
   “Example content”
   NOTE: Content can be text, list, heading, and any other valid HTML tag or shortcode
4. Closing tag for accordion pane
   [endaccpane ]
5. Additional accordion panes
   Repeat steps 2 through 5
6. Closing tag for accordion
   [endaccordion]

Result