Accordions

Inserting Accordion

Accordions are panels that can expand and collapse. They are a great way for presenting information in a limited amount of space. By default the accordion will toggle one panel at a time.

Step 1: Switch To Backend Editor

To insert a box, start by clicking the button "Backend Editor" button then click the "+"(Add Element) button, for example:

VC Editor Backend
Step 2: Select Accordion

Click "ThemeMountain Accordion" in the Visual Composer Modal, for example:

Accordion
Step 3: Edit Accordion Settings

Once the accordion element has been inserted click the Edit Link(pen icon) of the accordion wrapper, for example:

Accordion Settings

Here is an overview of available accordion options:

  • Multiple Active Panels

    If checked, this option will allow the accordion to have multiple active panels. Refer to Step 4. on how to set an active panel.

  • Extra Class Name

    If you wish to style this component differently, then use the extra class name field to add one or several class names and then refer to it in your css file.

  • Accordion Style

    Sets the accordion style to either Default, Bordered or Lined.

  • Accordion Size

    Determines whether accordion should be small, medium, large or extra large in size.

  • Accordion Border Style

    Whether the accordion should have sharp corners or rounded corners.

  • Use Icon

    If checked, +/- icon is added to the accordion header and toggled upon clicking.

  • Color Options

    Header Background Color
    Header Background Color Hover
    Header Background Color Active
    Header Border Color
    Header Border Color Hover
    Header Border Color Active
    Header Text Color
    Header Text Color Active
    Header Text Color Hover
    Tab Panel Text Color
    Accordion Content Border Color

Step 4: Add Content

Once you have edited the accordion settings, click the Edit Link(pen icon) of the accordion panel you wish to edit, for example:

Accordion Add Content

Here is an overview of available panel content options:

  • Panel Title

    Sets the accordion tab title

  • Make Active

    Determines whether the accordion panel is active by default i.e. whether it will be upon page load.

  • Content

    Accordion panel content, text and images are supported.

Can't find what you're looking for? Submit a request in our forum.