Accordion Tab represents a graphical control element comprising a vertically stacked list of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item. Tabs are similar to Accordions in that they contain information that can be expanded and collapsed. You can easily build Accordion Tab Widget with EnterAddons.
Using Accordion Tab Widget :
You can see the below video to get an insight into how you can use the Accordion Tab Widget, Or you can follow the documentation whichever you find convenient.
Firstly, select the Accordion Tab Widget from the menu bar on the left-hand side of your screen and drag and drop it in the selected area.
Step1
Secondly, from ‘Content’ section you will get Accordion Tab Content section.
After that, from ‘Accordion Tab Content‘ section, you can find ‘Content List’ and ‘Image List’ respectively.
From ‘Content List’ and ‘Image List’, you can add list item clicking with ‘ADD ITEM’ button and also you can remove this item clicking with ‘X’ button.
Then Also, from ‘Content List’, you can edit title, count-number and description respectively.
Moreover, from ‘Content List’ , you can add or select ‘Font Awesome’ icon or ‘SVG’ image-icon also.
After that, from ‘Image List’, you can add image, card title and button-title’ respectively.
Step2
From ‘Style’ section you can stylize the widget. You will get the Single Accordion Wrapper, Accordion Title, Accordion Count/Icon, Accordion Description, Image Wrapper, Image, Accordion Media Card, Accordion Media Card Title and Accordion Card Button section respectively.
After that, from ‘Single Accordion Wrapper > NORMAL STYLE’, you can add margin, padding, border-type, border-radius, box-shadow and background-type respectively in NORMAL view like below.
Moreover, from this section you can see ‘ACTIVE STYLE’ view also.
After that, from ‘Accordion Title > NORMAL STYLE’, you can add title-color, typography, margin, padding, border-type, border-radius, box-shadow and background-type respectively in ‘NORMAL’ view.
Moreover, from this section, you can find ‘ACTIVE STYLE’ view also.
Then, from ‘Account Count/Icon’ section you can add count-width, count-height, opacity, active-opacity, color, typography, margin, padding, border-type, border-radius, box-shadow and typography respectively.
After that, from ‘Account Description’ section you can add color, typography, margin, padding, border-type, border-radius and box-shadow respectively.
After that, from ‘Image Wrapper‘ section you can add image-wrapper-width, image-wrapper-height, margin, padding, border-type, border-radius, box-shadow and typography respectively.
Then, from ‘Image‘ section you can add margin, padding, opacity, border-type, border-radius and box-shadow respectively.
After that, from ‘Accordion Media Card’ section you can add or edit margin, padding, border-type, width, color, border-radius and background-type respectively.
Then, from ‘Accordion Media Card Title’ section you can add color, hover-color, typography, margin, padding and background-type respectively.
After that, from ‘Accordion Media Card Button > Normal Style’, you can add color, typography, icon-margin, padding, border-type and background-type respectively in ‘NORMAL’ view.
Moreover, from this section you can find ‘HOVER’ view also like below.
Step3
Finally, after finishing all the editing, click ‘Update’, and then click on ‘Preview > Preview in new tab’ to see your work live.
