How To Use The Accordion Widget By Atomic Addons

The Accordion widget by Atomic Addons shows a list of titles; clicking a title opens its content below it. Each row can hold your own text or a saved Elementor template, so it works for FAQs, product details or any content that would make a page too long. This guide covers adding the widget, building the rows and choosing how they open.

Enable the Accordion Widget

Accordion is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

1. 1

   Go to WordPress Dashboard → Atomic Addons.

2. 2

   Click the Widgets tab.

3. 3

   Search for Accordion. You can also open the Content category.

4. 4

   Turn the Accordion widget on.

5. 5

   Click Save Settings.

Add the Accordion Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Accordion. The widget sits in the Atomic Addons category.

3. 3

   Drag it into the page and set it up with the controls below.

4. 4

   Click Publish (or Update).

Accordion

Open the widget and go to Content → Accordion. The Items list starts with three rows, Accordion #1 to #3. Click a row to edit it, or click Add Item for a new one. Each item has:

1. 1

   Title & Content: The text of the row's title, “Accordion Title” for a new item. It accepts dynamic tags.

2. 2

   Select Source: Where the row's content comes from. Custom Content, the default, shows a text editor for your own text and images. Elementor Template shows a Select Template field: type a name and pick one of your saved Elementor templates. AE Template does the same for templates made with the AnyWhere Elementor plugin; without that plugin the list shows “AE Plugin Not Installed”.

3. 3

   Title Icon: An icon in front of this row's title. It shows only while Show Title Icon (below) is on.

Below the list, the settings apply to every row:

1. 1

   Title HTML Tag: The titles' markup: H1 to H6, div, span or p. div by default; pick a heading level if the titles should count as headings for search engines and screen readers.

2. 2

   Icon: The icon shown on a closed row, a plus by default. Clear it to show no open and close icon.

3. 3

   Active Icon: The icon shown on an open row, a minus by default. It appears only while an Icon is set.

4. 4

   Show Title Icon: Shows each item's own Title Icon. Off by default.

Visitors open a row by clicking its title, or with the keyboard: the titles can be reached with Tab and opened with Enter or Space.

Additional Settings

Content → Additional Settings decides how the rows open and close:

1. 1

   Collapsible All Item: On by default: visitors can close every row. Turn it off to keep one row open at all times; if no Active Item No is set, the first row opens.

2. 2

   Multiple Open: Lets several rows stay open at once. Off by default, so opening a row closes the one that was open.

3. 3

   Close All Items on Mobile: On screens narrower than 768px, every row starts closed when the page loads, even the Active Item No row.

4. 4

   Active Item No: The number of the row that is open when the page loads, 1 to 20. Leave it empty to start with every row closed.

5. 5

   Hash Location: Gives each row a shareable link. Clicking a row adds its title to the address bar, such as #shipping-and-returns, and opening the page with that address opens the row.

6. 6

   Scrollspy: With Hash Location on: when the page opens with a row's address, it scrolls down to the row first and then opens it.

7. 7

   Top Offset: With Scrollspy on: the space left above the row after scrolling, 70px by default. Raise it if a sticky header covers the row.

8. 8

   Scrollspy Time: With Scrollspy on: how long the scroll takes, 1000 milliseconds by default.

9. 9

   Schema Active: Adds FAQ markup (schema.org FAQPage) so search engines can read the titles as questions and the contents as answers. Only rows with Custom Content carry an answer text.

The row address is made from the title text, so two rows with the same title share an address. Give rows distinct titles when you use Hash Location.

Style the Accordion

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Item — the Item Gap between rows (8px by default), each row's background, border, hover border color and radius, and the title text's Alignment. Below them, the title in Normal, Hover and Active (open) states: color, background, border, radius, padding, typography, text stroke and shadow.
• Title Icon — with Show Title Icon on: the icons' color in each state, size and spacing.
• Open & Close Icon — the Alignment of the icon at the start or end of the title (the end by default), and its color, background, border, radius, padding, spacing, size and shadow in Normal, Hover and Active states.
• Content — the open content area: text color, background, border, radius, padding, the spacing above it, typography, shadow and alignment.