Advance Accordion

You can design your website pages with more uniqueness and elegance using the Advance Accordion Widget of AbsolutePlugins. You can easily implement it in your web pages and edit it within a minute based on your website focus. 

You can see the below video to understand how you can use the Advance Accordion Widget. Or you can follow the documentation whichever you find convenient.

Step 1

To use our Advance Accordion widgets, first, create a section by clicking on the “+” icon on Elementor and then from the block section of the left bar search for Advance Accordion. Drag the Advance Accordion block and drop it into your created section.

Now under the Content tab, you can select the Accordion style from the Advance Accordion Style dropdown menu. There are thirteen unique and professional-looking styles available for the Advance Accordion section. You can choose any of the styles you want.

You can see all the Advance Accordion-style from hereChoose any of the styles you want by clicking on the style number.

Step 2

After selecting your style now it’s time to edit it. By default, your accordion will have five items. You can delete any item by clicking on the “X” icon.

You can also duplicate any item just by clicking the icon next to the delete icon. To edit any item just click on the item and you can see the title edit and paragraph edit option. Add your title in the Accordion Title field and add text in the Accordion content area.

Advance Accordion

You can add items by clicking on the Add item button. Just click on it and an item will be added and you can edit the title and content following the same procedure. 

Step 3 

Now go to the Accordion Control tab and here you will find some more advanced options. You can enable or disable the Accordion icon from the Select accordion icon menu. If you select yes your accordion will enable, selecting no will disable the icon. Here you select option no from the select accordion icon menu and you can see that the icon will disable from the design.

Advance Accordion

But if you select yes from the select accordion icon menu then you can see two more options – 

  • Select accordion before icon: You can select the icon before expanding the accordion. 
  • Select accordion after icon: You can select icon after expanding the accordion 

To select an icon you have two options. You can upload your own icon in SVG format or you can choose any icon from the icon gallery. To upload your own icon click on the Upload SVG option and you can select your icon from your computer.

Advance Accordion

To add accordion before the icon from the icon library click on the Icon library option and it will pop up the Elementor default icon library page. Just select the icon you want to add and then click on the Insert button. Follow the same procedure to add accordion after icon.

Advance Accordion

From the Alignment option, you can set the icon potion, you can add the icon at the start of the accordion or end of the accordion. This is how it looks when you select the alignment to End.

Advance Accordion
You can select the accordion animation effect from the Select animation tab. There are two animation effects available

  • Slide 
  • Fade

Advance Accordion

From the animation open speed and animation close speed, you can set the animation speed while opening and closing.

Advance Accordion

Step 4

Advance Accordion

Now move on to the Style tab where you can style your accordion as you want. In the style tab, you will find 4 different menus and under those menus, you will find all the features to redesign your accordion in a minute.

Under General Accordion Style you can style your accordion for three different conditions: 

  • Normal 
  • Hover 
  • Active

For normal mode, you can set the width of the accordion from the width option.

Advance Accordion

You can set the background of your Accordion from the Background Type option.

  •  Classic – You can set the background image
  •  Gradient – You can add color gradient

Step 5

Now come to the title option to style your title text. You can style the title for normal, hover and active conditions. In title typography you have two options, you can add custom typography or you can set your title from the style options. Click on the edit option and the style page pop up where you can set the font family, font size, width, line height and text transform.

Advance Accordion

Set background as classic or gradient from the background type option. You can also add title color and padding to place the title in the right position.

Advance Accordion

Style the hover and active condition following the same way.

Step 6

From the Accordion content menu you can style the content area and using the Accordion icon menu you can style the icon area for normal and hover situations.

Advance Accordion

Step 7

Move on to the Advanced tab to set some advanced features. In the advanced tab, there are a lot more things you can edit.

Advance Accordion

From the advanced menu, you can set the margin, padding, z-index, CSS id and classes.

Advance Accordion

In the motion effect option, you can set the entrance animation effect. There are a lot of entrance animation effects available so you can view them and choose the best one for you. You can also set the animation duration and delay time.

Advance Accordion

You can add the background for normal and hover conditions as classic or gradient for the call to action section. For the hover section, you can add the transition time too. From the position option, you can set the width and choose the position as absolute or fixed. You can set the responsiveness of this section from the responsive option. You can set the device to show this section or not.

That’s it! you have successfully redesigned your Advance Accordion section.

Was this article helpful to you? Yes No