Accordion

< All Topics
Widget Used
Accordions
Knowledge Required
Novice

Accordions come in very handy when you want to show a large amount of content on a page without increasing it’s length and scroll time. It is a collapsible element which when clicked shows the content and hides the another presenting the information professionally in limited space thereby improving user experience.

Pro tip
You can connect your accordion with our Anything Carousal widget which works based on Elementor Templates making your accordion layouts unique and creative.

How to use the Accordions Widget of The Plus Addons For Elementor

The Accordions widget is very easy to use widget. Let’s understand how to use this widget in the tutorial below.

Table Of Contents

General Steps


Search for the Accordions widget from the Elementor screen in the left and then drag and drop it into the content building area. After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Accordion Items

Add your accordion content (title and description) here. You can also duplicate the accordion by clicking the duplicate icon and delete it by clicking the delete icon. If you want to add a new accordion, click on the Add Item button.

Icon

Add your desired icon here. You can add a SVG icon or an icon from the Font Awesome library.

Active Icon

Select your active icon of choice to be set on the accordion.

Title HTML Tag

Set the Title HTML tag here.

Extra Option

Enable On Hover Accordion in the Accordion widget.

Active Accordion

Select the Accordion which you want to stay active when the page loads.

On Hover Accordion

Slide to enable the On Hover Accordion.

Connection Carousel ID

Enter the Connection Carousel ID here.

2. Style

The Style tab is used for customizing the appearance of all the Post Search widget components.

Icon

Use this option to set the Alignment, Color, Active Color, Gap, and Icon Size here.

Title

Use this option to set the Title Alignment, Typography, Color, Icon Width, Icon Size, Icon Space Indent, Box Radius and Box Shadow here.

Title Background

Use this option to set the Inner Padding, Accordion Between Space, Box Border, Background Type and Box Shadow here.

Content

Set the Typography and Text color for the Content here.

Content Background

Set the Content Margin Space, Content inner padding, Box Border, Background Type, and Box Shadow for the Content Background.

Hover Style

Set the Hover Style and Color here.

On Scroll View Animation

On Scroll View Animation Options are used to set beautiful animations to your sections. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View On Scroll View Animation Tutorial

3. Advanced

Want to get nerdier with our widgets? Check out the Advanced Tab. They are a common option for almost all the widgets. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?