PowerPack Documentation

Advanced Accordion Widget Overview

Table of Contents

Accordions help in displaying content-heavy pages in less space. With PowerPack Elementor’s Advanced Accordion widget, you can create a stylish set of Accordions for your website. You can check out the demo of the Advanced Accordion widget here. Here, in this doc, we will have a look at the detailed overview of the Advanced Accordion widget.

Firstly, drag and drop the Advanced Accordion widget on the page that you are editing with Elementor. The Advanced Accordion widget has customization and styling options in the Elementor Editor’s Content and Style Tab.

Let us go through the Content tab of the Elementor Editor for the Advanced Accordion widget.

Content Tab

There are 3 sections in the Content Tab of the Advanced Accordion widget:

  • Accordion
  • Toggle Icon
  • Settings

Let us go through each of the sections one by one.

Accordion

Accordion Section in the Content Tab
Accordion Section in the Content Tab

Here, you can add any number of accordions that you wish to display on your webpage. You can write up a title for your accordion, choose the icon of your accordion, and add the content to your accordion. With PowerPack’s Advanced Accordion widget, you can display different content types in accordion, such as simple text content, image, saved section, saved widget, or saved page template.

Different Content Types in Advanced Accordion
Different Content Types in Advanced Accordion

Further, you can set any accordion as “Active as Default”. It means that whenever you load the webpage containing the accordion, it’ll open a single accordion that you have selected by default.

Toggle Icon

Toggle Icon in Content Tab
Toggle Icon in Content Tab

As the name suggests, in the Toggle Icon section, you can choose the Icon that is displayed beside the accordion. You can choose a “Normal Icon” that is displayed when the accordion is closed and an “Active Icon” that is displayed when the Accordion is open.

Settings

Settings Section in the Content Tab
Settings Section in the Content Tab

In this section, you can choose the HTML tag of the Title, speed at which the Toggle opens, and the Type of Accordion. There are two types of Accordions that you can choose from: Accordion and Toggle.

This was all about the Content Tab of the Advanced Accordion widget. Now, let us go through the Style Tab of the Advanced Accordion widget.

Style Tab

There are 4 sections in the Style Tab of the Advanced Accordion widget:

  • Items
  • Title
  • Content
  • Toggle Icon

Let us see the available styling options in each of the sections.

Items

Items Section Styling in the Style Tab
Items Section Styling in the Style Tab

In this section, you can style the Accordions as per your requirement. You can set the Border type, width, color, and radius for the Normal mode, Hover mode, and Active mode. Further, you can set the gap between the Accordions, add Box Shadow to Accordion boxes, and set paddings between them.

Title

Title Styling for Advanced Accordions
Title Styling for Advanced Accordions

In the Title section, you can set up typography, text color, background color, and borders for the Accordion Title in Normal, Hover, and Active mode. Further, you can set the size of the icon that is displayed beside the Title. Apart from that, you have the options to choose spacing between Title and Content using the “Bottom Spacing” option.

Content

Content Section in Style Tab
Content Section in Style Tab

As the name suggets, you can style the content of the accordions using the Content section. You can set background color, text color, typography, and padding for the content that appears inside the accordions.

Toggle Icon

Toggle Icon Section in the Style Tab of Advanced Accordion Widget
Toggle Icon Section in the Style Tab of Advanced Accordion Widget

Here, you can style the Toggle Icon that appears with the Accordion. You can set the alignment, icon size, padding, and spacing for the Toggle Icon. Further, you can style the Toggle Icon by changing the text color, background color, and borders of the Toggle Icon for Normal, Active, and Hover modes.

This was all about the Advanced Accordion widget available in PowerPack Addons for Elementor. Feel free to get in touch with us in case of any queries or concerns. 🙂

Last updated on June 23, 2021

Download PowerPack Free

Subscribe to receive latest updates, announcements, offers, deals & discounts.

Latest Additions