The Accordion Element allows you to create expandable sections of your content. These are great for creating pages such as FAQs or similar.
How to Use The Accordion Element
To get started with the Accordion Element, simply drag an Accordion Element onto your page.
To add a new pane to your Accordion, click the Add Pane button in the settings panel on the right of the editor.
Add panes, choose whether only one can be open, and pick the open icon in Main.
Configuring Your Accordion Elements
There are a bunch of options that come with the Accordion Element.
You can set the title that appears on your accordions under "Manage accordion sections" in Main. By default, only one pane can be open - use the "open" toggle to decide which pane opens automatically.
If you'd like multiple panes to be open at once, you can toggle off "Only one pane open".
Open icon allows you to change the icon that is shown on the accordion section. There are three options: None, Chevron or Plus.
The Pane header text settings control the font, size and alignment of the pane titles. You can choose to right, left or center justify your titles.
The Accordion Element uses the Google Fonts API to pull in fonts to choose from for your pane headings.
If you've set a font and would like to change it, click the "X" button to the right of the font to clear the box and pick a new one.
You can also set the Heading padding to control the space around your pane titles.
Styling Your Accordion
The Accordion Element offers a range of customization options that can help you make your page the way that you like it. This includes color options for the Header background, Header text, Inner background and Border.
FAQs
How can I change my accordion heading classes?
By default Shogun's accordion headings leverage the H4 CSS from your theme, however, you can prompt the text to pick up alternative stylings from your theme's header classes by adding the relevant tags around the text as illustrated.
Note: in implementing the above workaround, your theme's default styling for those header tags is going to supersede any changes you make to the same headers using the controls in the settings panel; font, sizing, etc. due to the CSS specificity.