Accordion

Accordion in web design is actually derived from a musical instrument with same name. Accordion as a musical instrument have same kind of panel structure which opens and closes it self for it’s function of playing music. Same goes with in UI.

Accordions are very useful and attractive UI control because it gives user that panel shift on click. Mostly used because they allow to display a lot of relative content in such a short compact space.

Pro tip
Use no. of accordions which fits in user’s vertical view-port. Using more numbers of them will create unnecessary panel UI shift, which is bad UX.

Configuration for Accordions

Accordions are mostly used for a content which is logically similar. You need to create headline first for title or clickable part. Then after content goes into it’s description part. This is it.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add accordions into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing accordions after “/” sign, eg.“/accordions”, in the content area. Gutenberg also provides drag & drop after opening the list of widgets panel.

After placing the widget you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Accordions

A repeater field to add as much accordions as you want.

Title

An input for heading which is going to be clicked by user to view the whole content.

Content Type

A selection whether you want to have custom content or want to use reusable blocks as a content.

Description

An input for custom content which is going to displayed to user on click of title.

Block Template

A reusable block template selection, from which content reference is been made.

Back-end Visibility

Option for Preview of selected template in back-end.

Front Icon

Visibility option to display icon in title.

Select Icon

You’ll be displayed whole list of icons provided by the FontAwesome icon library. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.

Unique ID

A unique ID to call this tab directly from external page.

Toggle Icon

Show Icon

Visibility option to show icon or not.

Icon Alignment

To align icon before or after title text or in starting or ending position in heading tab in other words.

Select Toggle Icon

You’ll be displayed whole list of icons provided by the FontAwesome icon library for toggle icon selection. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.

Select Active Toggle Icon

You’ll be displayed whole list of icons provided by the FontAwesome icon library for selection of tab icon which is currently active/ open. If you have purchased licence for pro plan and activation has been done then you’ll able to use pro icons too.

Extra Option

Default Active Tab

Selection of tab number which is going to be active/ open on page load.

Accordion Type

Choose trigger whether to open accordion on click or on hover.

Title Tag

Html tag selection for title/ heading text.

Carousel Connection ID ⭐

A connection ID from which this tab can be remotely controlled with another widget we provide named “Anything Carousal Remote”.

SEO Option

Enable Schema Markup

Option provided for Search engine optimisation, which will convert this accordion into FAQ type schema used for SEO.

2. Style

The Style tab is used for customising the appearance of all the Accordion widget components. All these styling options include customising the fonts, colors, background, margins and padding which are common across all the widgets. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Title

Typography

Assign size, weight, spacing and much more to fonts.

Alignment

Align heading/ title text in left, centre or right from here.

Color

A color picker to assign suitable color to the title, selection for on Hover & on Active is also provided.

Title Background

Inner Padding

Put-in some inner space to title background.

Accordion Between Space

Set space between two accordion panels.

Border

Draw a border around the accordion and give width and color to it.

Border Radius

Set the radius curve of the accordion panel’s corner.

Background

Apply suitable background like color/ gradient to an element.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Description/ Content

Typography

Assign size, weight, spacing and much more to fonts.

Alignment

Align content text in left, centre or right from here.

Color

A color picker to assign suitable color to the description text.

Description/ Content Background

Margin

Put-in some outer space to the content.

Padding

Put-in some inner space to the content.

Border

Draw a border around the content and give width and color to it.

Border Radius

Set the radius curve of the content’s corner.

Background

Apply suitable background like color/ gradient to the content.

Box Shadow

Give Box/Text/Drop shadow effect and color to the content.

Toggle Icon

Color

A color picker to assign suitable color to the toggle icon.

Active Color

A color picker to assign suitable color to the toggle icon of active tab.

Icon Gap

Manage space between icon and heading text.

Icon Size

Manage icon size from here.

Front Icon

Color

A color picker to assign suitable color to the front icon.

Active Color

A color picker to assign suitable color to the front icon of active tab.

Icon Space

Manage space between icon and next content.

Icon Size

Manage icon size from here.

Extra Option

Hover Style

Effect on hover.

Hover Color

Effect color on hover.

3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Note : ⭐ Symbol as a suffix displays a Pro feature field.
Was this article helpful?
4 out of 5 stars
5 Stars 0%
4 Stars 100%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?