Phlox Accordion

With Phlox Accordion Widget, you can create multiple section in a vertical list box. The sections or elements come with label and content. Each section is expandable and by clicking on the section title, the content will be displayed.

Follow below steps to add Phlox Accordion Widget to a widget area or in a page content:

  1. Go to your WordPress admin panel
  2. Click on the Appearance on the Dashboard
  3. Then click on the Widgets
  4. Find [Phlox] Accordion among the available widgets and add it to your desired Widget Area

Video Tutorial


Access Accordion Options in Elementor Page Builder

  1. Go to your WordPress Admin Panel
  2. Click the Pages on the Dashboard
  3. Click the Add New
  4. Navigate to the top left hand of the WordPress text-box and find Edit with Elementor button.
  5. Check out Elements
  6. Scroll down to PHLOX - GENERAL section
  7. Choose Accordion
After adding accordion to your post or page, you are able to customize it by available options:
  • Content

Accordion Items

This section lets you add, duplicate, or remove an accordion item. After that, you can select the accordion item you want and change its Title & Content.

Type

There are two types of accordion: Accordion (auto close other open tabs) and Toggle Accordion expands the sections one at a time and when you open a new section, the previous one will be closed. Toggle, however, can expand all the sections without closing any of them.

Title HTML Tag

With this option, you are able to change the title from H1 to H6. It can be div or section, too.

  • Style

Title Bar

You can change many options on this section. When you hover over title bar, your Mouse Curser can be Default, Pointer, Zoom, and Help.

Paddings, Margins, and Border Radius can be changed. Also, you can set different paddings and margins on mobile and tablet.

Box Shadow and Border Type of title bar has different settings. This section lets you change these on Normal, Hover, or Selected mode. Width and Color are editable and Background Type can be Classic or Gradient.

Title

You can change the Color and Typography of the title on Normal or Hover.

Content

Many options are available here that let you change Typography, Color, Paddings, Margins, Border Radius, Size and Position of accordion content. Besides, you can set a Background for your content.

Check out this article to know more about Advanced tab and start working with Elementor.


Access Accordion Options in SiteOrigin Page Builder

  1. Go to your WordPress Admin Panel
  2. Click the Pages on the Dashboard
  3. Click the Add New
  4. Navigate to the top right hand of the WordPress editor and find Page Builder, beside text tab
  5. Click the Add Widget
  6. Click the Phlox and choose [Phlox] Accordion
  7. Click the Edit on the right side of the widget on Page Builder

After adding accordion to your post or page, you are able to customize it by available options:

Title

Add a title to the whole accordion, if you want the widget to appear with a title.

Type

This element has two types: Accordion and Toggle

Accordion expands the sections one at a time and when you open a new section, the previous one will be closed.

Accordion

Toggle, however, can expand all the sections without closing any of them. Toggle

Extra Class Name

In this field, you can add a class name that you have written on your CSS file before.

Add or Delete a Section

You can simply add any number of items you want. Then you are able to duplicate each item, or easily swap them with drag and drop. Also, the items can be deleted.

Add Label and Content to a Section

Each section can has its specific label and content.

Accordion Label

Here you can choose a label or title for the section.

Content

In the textbox you can write the content you want to show when you click the label. Here you can find the common styles of widgets in Page Builder.
Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us