The Accordion widget allow to Displays collapsible content panels for presenting information in a limited amount of space.With the Accordion, visitors can scan the item titles, and choose to expand an item only if it is of interest.
Using Accordion Widget:
You can see the below video to get an insight into how you can use the Accordion Widget, Or you can follow the documentation whichever you find convenient.
Select the Accordion Widget form the menu bar on the left-hand side of your screen and drag and drop it in the selected area.
Step1:
Step2:
In ‘Content’ Section you can edit ‘Accordion content’ and ‘Accordion icon settings’.
In ‘Accordion content‘ section you can write ‘Title’, ‘Description’ and set ‘Active’ option for accordion item.
In ‘Accordion icon settings’ section you can set ‘Number Count ( show / hide )’ and ‘Icon ( show / hide )’. You can set Icon Position Type ‘left’, ‘right’ and ‘both side’. And also set Right Icon Position ‘Near Text’ and ‘Absolute Right’ from here.
Moreover, You can change ‘Active Icon’ and ‘Close Icon’ for each item.
Step3:
In ‘Style’ Section there are options to design Wrapper Area Settings, Item Settings, Title, Descriptions, Icon and Number count.
In ‘Wrapper Area Settings’ section you can add margin, padding, border-type, border-color, border-width, border-radius, box-shadow, background-type respectively.
In ‘Item Settings’ section you can add margin, padding, border-type, border-color, border-width, border-radius, box-shadow, background-type respectively.
In ‘Title’ section you can add title color, typography, margin, padding, border-type ( color and width ), border-radius, background-type ( color and image ) respectively in NORMAL view.
From this section in Active Style you can add title-active-color and background-type ( color and image ) respectively in ACTIVE view.
In ‘Descriptions’ section you can add margin, padding, border-type ( width and color ), border-radius, background-type ( color and image ) respectively .
In ‘Icon’ section you can add width, height, margin, padding, border-type ( width and color ), border radius, background-type ( color and image ) respectively in NORMAL style .
From ‘Icon’ section in Active Style you can add title icon active color and background-type ( color and image ) respectively.
From ‘Number count‘ section you can add width, height, margin, padding, border-type ( width and color ), border-radius, number color and background-type ( color and image ) respectively in NORMAL style .
And also from Active Style you can add active color and background-type ( color and image ) respectively also.
Step4:
Finally, after finishing all editing click Preview > Preview in new tab to watch your work live
And that’s it.