Main Panel Name
Tab Panel Name
Step By Step
The Multi-Level Accordion is a flexible widget that allows you to easily create accordions with unlimited sublevels. Each tab can be styled individually for the text, color, background, size and more. You can also add your own custom icons to each tab. The widget is breakpoint friendly and fully responsive. This widget can be used to create FAQ-like accordions or to display your information in an organized manner.
The widget option panel consists of six main sections. Each section is to control specific functionalities. See the sections below, and click on each one to see the related documentation.
The Accordion-Name must be the same on the MAIN widget and all of the TABs. This ensures that all the tabs are connected.
By default, arrows are added to all the tabs automatically. This section allows you to fully customize your arrows. To remove the arrows, uncheck the box.
You can choose to add your own icons to this widget. Set the pixel size of your icons here.
When this box is checked other tabs will automatically close when one is clicked. Unchecking this box will allow you to have multiple tabs open at the same time.
The accordion-name must be the same in all the TABs and the MAIN widget. Doing this ensures that the widget works properly and that the tabs are connected to the main widget.
Each tab should have a unique ID to identify it.
Parent’s ID: Assign a parent ID to create sublevels. For multiple sublevels, the parent will always be the level right above the current level. (Note: top level tabs do not need a Parent ID)
To style the appearance of your tabs you can add a fill color, background color, stroke, and more through Muse’s features.
Text: Insert the text that you want in this field. This feature does not support paragraph breaks. Leave this field empty to have the ID as the text. The text’s font, font size, alignment, and color can be styled through the Text Panel.
Icon: Click ‘Add File’ to add your own custom icons. You can insert icons for either the default state (when the tab isn’t open) or the opened state (when tab is open). You can use JPG, PNG, GIF, or TIFF for your icon files but the recommended file type is a PNG. The best way to save your icon files is to open the icon in either Photoshop or Illustrator and select ‘Save for Web’ and save it as a PNG-24 with a transparent background.
Letter Spacing: Increase or decrease the letter spacing.
Customize the inner top, right, bottom, and left spacing (between the tab’s edge and your text) within your tabs.
When you’re building your accordion the ID tag will automatically show up on the right side. Check this box to hide the ID tag while you’re editing your accordion.
Get It Here