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.
- 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
- open = “true” OR “false”: determines whether the panel will be open or close on page load. Default value is false.
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.
- Accordion ID
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.
- Accordion pane
[accpane title="Example title" id="accordion1" number="1" open="1"]
NOTE: Content can be text, list, heading, and any other valid HTML tag or shortcode
- Closing tag for accordion pane
- Additional accordion panes
Repeat steps 2 through 5
- Closing tag for accordion
[accpane title="Room Reservation at Grainger Library" id="accordion1" number="1"]
[accpane title="Computers" id="accordion1" number="2" open="true"]
- Item in an ordered lists
- Second item in an ordered list
[accpane title="Printing, Scanning & Copying" id="accordion1" number="3"]
Things not in a list.
List item inside of a pane inside of an accordion pane