All Collections
Element Tutorials
Structure
Create expanding and collapsing sections with Accordions
Create expanding and collapsing sections with Accordions

The accordion element allows you organize your page content with expanding and collapsing sections.

Updated over a week ago

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, simply use the 'add new pane' option in the right-hand menu of the editor.

Configuring Your Accordion Elements

There are a bunch of options that come with the Accordion Element.

By default, only one pane of the accordion can be opened at any one time. This can be changed by disabling the only one pane open option in the sidebar.

Icon allows you to change the icon that is shown on the accordion section. There are currently three options: chevron, none or plus.

Text Alignment determines the justification of the titles of the panes. You can choose to right, left or center justify your titles.

Font allows you to change the font and the font size of your pane headings. The Accordion Element uses the Google Fonts API to pull in fonts to choose from.

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 a range of color options for your Accordion.

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 sidebar; font, sizing, etc. due to the CSS specificity.

Did this answer your question?