Accordion

Accordion

Accordion in web design is actually derived from a musical instrument with the same name. Accordion as a musical instrument has the same kind of panel structure which opens and closes itself for its function of playing music. The same goes for UI.

Accordions are very useful and attractive UI control because it gives the user that panel shift on click. Mostly used because they allow displaying 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.

How to use the Accordion block of The Plus Addons For Gutenberg

The Accordion block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Accordion 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 Accordion after “/” sign, eg.“/Accordion”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks 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 many accordions as you want.

Title

Input for the heading is going to be clicked by the user to view the whole content.

Content Type

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

Description

An input for custom content is going to display to the user on click of the 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 the back-end.

Front Icon

Visibility option to display icon in the title.

Select Icon

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

Unique ID

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

Toggle Icon

Show Icon

Visibility option to show the 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 a whole list of icons provided by the FontAwesome icon library for toggle icon selection. If you have purchased licence for the pro plan and activation has been done you’ll use pro icons too.

Select Active Toggle Icon

You’ll be displayed the 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 the pro plan and activation has been done you’ll 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 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 block we provide named “Anything Carousal”.

SEO Option

Enable Schema Markup

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

2. Style

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

View The Style Tab Article

Title

Typography

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

Alignment

Align heading/ title text in left, center 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 a size, weight, spacing and much more to fonts.

Alignment

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

Color

A color picker to assign a 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 a suitable color to the toggle icon.

Active Color

A color picker to assign a suitable color to the toggle icon of the 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 a suitable color to the front icon.

Active Color

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

Icon Space/Indent

Manage space between icon and next content.

Icon Size

Manage icon size from here.

Extra Option

Hover Style

Select your preferred style for the hover effect.

Hover Color

A color picker to assign a suitable color to the hover style.

3. Advanced

Advanced Tab Options are common across all the blocks. 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?
3.8 out of 5 stars
5 Stars 33%
4 Stars 33%
3 Stars 0%
2 Stars 33%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.