Pro Accordion

This component allows you to create smooth, accessible accordions either by stacking individual accordion items containing any elements or dynamically generated accordion items directly from ACF/Meta Box fields.

Live previews are now being added to show some of the settings available in the browser.

Brief Feature Introduction

The main difference between this component and the default toggle component that comes standard in Oxygen are;

Accessible out of the box.
The number of accordion items can be dynamically generated via ACF or Meta Box.
Autoclosing of other items when one is opened.
Smooth transitions of expanding content area.
Built-in icon animations auto-synced with expanding transition timing.
Optional secondary ‘context’ icons in the accordion header.
Styleable counters for creating numbered lists.
Customisable list markup (ul>li, ol>li, div>div)
Option to auto-add schema markup.
Toggle user-scrolling as items are expanded.
Focus, Active & Color controls for all elements.

Accordion Types

Accordions can either be created by stacking individual items next to each other to manually build using custom elements, or each item can be dynamically populated directly with Advanced Custom Fields.

Individual Items – By selecting individual items, each time you add a component it will be used as one accordion item. The idea is to add a few components all next to each other and the entire thing will work as one accordion. (the components will ‘know’ they are next to each other and will open/close when needed’).

Dynamic Items – If wanting to populate the accordion dynamically using ACF repeater or Meta Box cloneable group fields, only one component needs to be added. The field names will need to be filled in order to see the element. (If no content, you can always style by changing the accordion back to ‘individual items’ and then change back to dynamic once you have finished).

The Accordion Structure

Each accordion consists of the following components, with it’s own style controls.

Accordion item – The container for each item inside the accordion. Each item has a header and a content part.

Accordion Header – The header of each item that acts as the button for opening up the content underneath. The header contains the icons, the main header text & subtext.

Accordion Content – The content area underneath each header expands & closes when the header is clicked by the user. When using individual accordion items, any elements that are placed inside the accordion in the structure panel will be added to the content to be revealed when the header is clicked.

Toggle Icons & Context Icons

Inside the accordion header, there are two built-in icons. Context icons for adding context to the accordion item (such as a question mark if it’s part of an FAQ for example) and a Toggle Icon which is for showing whether the accordion item is expanding or closed.

Both icons can be switched from left to right from inside the Accordion header settings by changing the flex-direction.

Toggle Icons

The toggle icon comes with a number of rotations and flip effects that are synced in time with the opening of the accordion item.

Either one icon can be used, or it can be changed to two icons, one to show when expanded, one for when closed. The rotate effects can still be used to switch between two icons.

Context Icons / Counter

In addition to the icon for the arrow/toggle, a secondary icon can be used inside each header to add some context to the accordion item. Likewise, a counter can be used instead of a context icon to automatically add a number to each item. This is useful when needing to have the items display as a type of numbered list and want more control over the style of each number inside the header.

Accessibility

The accordion will be accessible out of the box, meaning that users can tab across the accordion items using the keyboard and open each item using either pressing ‘space’ or ‘enter’. Only one accordion item can be open at one time. It’s recommended that you use the ‘focus’ styles found in the accordion header styles to make it easier for keyboard users to know when they are tabbing over which item.

Advanced Settings

Overflow anchoring – this setting controls whether the browser is allowed to scroll the user if opening an accordion item will make some of the content go out of the viewport. This is disabled by default, meaning the browser won’t jump to a new position when the accordion items are expanded.

FAQ Schema Markup – Choose to have each accordion item to include the structured data if using the accordion for an FAQ list. Note – this will only add the microdata to the individual accordion items, but you’ll still need to add the ‘https://schema.org/FAQPage‘ onto the page itself or a container element. Instructions on how to do this will be added shortly.

Accordion Item Tags – The tags for the items inside the accordion can be changed from divs to either an ordered list or unordered list depending on the use case. (In either case, you can still take advantage of the counter feature to display numbers for each item, it doesn’t need to be set to ordered list)

Using individual items inside repeater – If you’re duplicating a single accordion item inside of a repeater, make sure this option is enabled. It will make sure the CSS counters are correct based on the number of items inside of the repeater and also opens up a new option for opening the first accordion item by default.

First Item Open – If using accordions inside of repeaters, this option allows you to have the first accordion item open by default.

Tutorials

Support FAQ

When i’m seeing an outline when I focus on the accordion header? – This’ll be external CSS being added. There’s no default outline applied in the component. (A commonly used stylesheet that adds this is AutomaticCSS, which adds outline focus to all buttons on the page.) If this is not wanted, you can either use more specific CSS that doesn’t target all buttons, or override the CSS to cancel it. The class on the accordion headers is ‘oxy-pro-accordion_header’.