ac_desc
ac_desc
ac_desc
ac_desc
ac_desc
ac_desc
ac_desc
mc1
mc2
mc3
mc4
mc5
mc6
mc7

Multi Level Accordion

FAQ

Overview

Widget Options

Main Panel Name

Main Settings

Tab Panel Name

Styling

Spacing

Settings

Step By Step

MULTI LEVEL ACCORDION

ADOBE MUSE WIDGET

OVERVIEW

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.

WIDGET OPTIONS

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.

MAIN PANEL-NAME

MAIN SETTINGS

TAB PANEL-NAME

STYLING

SPACING

SETTINGS

 

 

 

 

 

WIDGET OPTION

MAIN PANEL-NAME

The Accordion-Name must be the same on the MAIN widget and all of the TABs. This ensures that all the tabs are connected.

 

 

 

 

 

WIDGET OPTION

MAIN SETTINGS

 

 

 

1. Arrows

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.

 

  • Size: Pixel size
  • Thickness: Pixel stroke
  • Position: Sets arrow to left or right
  • Color: Customize the color of your arrows.

 

 

 

2. Icons

You can choose to add your own icons to this widget. Set the pixel size of your icons here.

 

 

 

3. Controls

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.

 

 

 

 

 

WIDGET OPTION

TAB PANEL-NAME

 

 

 

1. Accordion Name

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.

 

 

 

2. ID

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)

 

 

 

 

 

WIDGET OPTION

STYLING

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.

 

 

 

 

 

WIDGET OPTION

SPACING

Customize the inner top, right, bottom, and left spacing (between the tab’s edge and your text) within your tabs.

 

 

 

 

 

WIDGET OPTION

SETTINGS

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.

Step by Step

  1. Drag ‘Accordion MAIN’ and ‘Accordion TAB’ onto the canvas.
  2. Open the Main option panel and assign an Accordion-Name. This same name will be used on all of your Tabs.
  3. Give the same accordion name to each tab.
  4. To get more tabs, simply drag more ‘Accordion TAB’s onto the canvas, or, duplicate your current tabs.
  5. Add custom text to your tabs by opening the Accordion Tab option panel, go to ‘styling’, ‘text’, and enter your desired text.
  6. Optional: to create sublevels, open the options, under ‘Parent ID’, enter the name that you want the current tab to be nested under.

FAQ

Copyright © 2016 QooQee.com | QooQee Muse Templates & Widgets.

Adobe Muse Widget by QooQee.com