help center

On this page

Accordion widget with nested elements

Last Update: March 12, 2024

The Accordion with nested elements widget is an experimental feature and must be activated. To learn more about activating experimental features, see Elementor Features.

Add the widget

Accordion widget
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is an Accordion widget with nested elements?

Accordion with nested elements offers a more advanced and flexible structure, allowing you to nest additional elements within each section. It provides an enhanced way to organize and present content on your website compared to the standard Accordion widget.

Common use case

Matt is building a photography website. Rather than creating different pages, Matt wanted to create an interactive section where they showcase their work, make it easy for potential clients to book sessions, and display exclusive photography packages – all necessary details in one section of the website! 

To achieve this, they use an accordion widget with nested elements. In the accordion’s nested panels Matt included a portfolio showcase with an attractive image, a booking section with a CTA button, and a display of exclusive packages in list format.

Accordion with nested elements 10

Additional use cases

  • A nested accordion panel showcasing testimonials and reviews from satisfied clients.
  • Restaurant website showcases the menu, reservations, and chef’s specials.
  • An E-commerce Website displays product categories, promotions, shipping, and returns.

Video

See a video demonstrating the widget in action.

Add elements to your Accordion widget

You can add elements such as images, buttons, or other widgets within each Accordion section, providing more versatility in designing and organizing your content.

The new Accordion widget incorporates the features of the Toggle widget, so the Toggle widget is no longer available.

Note
This change does not affect existing Accordion and Toggle widgets on your website. You can still edit them using the previous options, and they will continue to work as they did before.
Important
The Accordion widget is not compatible with the Loop widget because nested elements do not work with repetitive elements.

Create an Accordion with nested elements

  1. Add the Accordion widget to the canvas. For details, see Add elements to a page.
  2. By default, the Accordion widget appears with Item #1 expanded on the canvas. Every item has a container already built in. You can add and customize elements to the empty container.
    Accordion with nested elements 8
  3. In the Content tab, under the Layout section, click an item to edit it.
    Accordion with nested elements 2
  4. In the Title field, add the accordion name and give the tab a CSS ID. For more details, see CSS selectors in Elementor.
    Accordion with nested elements 3
  5. Click the Add Item button to add a new tab.
    Accordion with nested elements 1

Settings for Accordion with nested elements

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Using the options in the content tab, you can control the layout and content of the accordion.

Accordion with nested elements 14 Accordion widget with nested elements 167

In the Content tab, expand the Layout section to determine the number of tabs and their titles.

Items: Each tab of the Accordion is an item. Click an item to edit it. Editing the item allows you to:

  • Title: Change the title. 
  • CSS ID: Give the tab a CSS ID. For more details, see CSS selectors in Elementor.
  • Item Position: Determine where the tab’s name will appear.

By default, an icon appears next to the tab’s name. Visitors click this icon to expand and collapse the tab.

You further get icon customization options, such as:

  • Position: Determine the icon’s place – on the left or right of the tab name.
  • Expand: Provides three options for the icon that opens the tab:
    • Accordion with nested elements 9 Opt for no icon by selecting the none option.
    • Accordion with nested elements 11 Upload your own SVG file as an icon. For more details, see Enable SVG support.
    • Accordion with nested elements 13 Pick an icon from the icon library. 
  • Collapse: Provides three options for the icon that opens the tab:
    • Accordion with nested elements 9 Opt for no icon by selecting the none option.
    • Accordion with nested elements 11 Upload your own SVG file as an icon. For more details, see Enable SVG support.
    • Accordion with nested elements 13 Pick an icon from the icon library.

Choose the HTML tag for your title. Choices include H1 to H6, Div, Span, or Paragraph.

Enable FAQ Schema for SEO benefits.

Tip: FAQ Schema is a special markup that tells search engines that this widget contains an FAQ. Marking an Accordion widget as an FAQ helps boost the visibility of your FAQs. It’s important only to mark one Accordion widget per page as an FAQ.

Accordion with nested elements 7

Determines how the Accordion appears by default:

  • First expanded –  The first item is expanded .
  • All collapsed – No items are expanded.

Determines how many tabs can be opened simultaneously.

  • One – Single tab can be opened at a time.
  • Multiple – Unlimited number of tabs can be opened simultaneously.

Adjust animation duration for opening and closing tabs.

Style tab

In the Style tab, you can control the overall style of the accordion.

Accordion with nested elements 4

Use the slider to increase and decrease the amount of space between tabs.

Use the slider to increase and decrease the space between the tab title and elements in the tab.

Choose the background. For more details, see Create a Background.

Choose the border type. For more details, see Border type.

You get three styles to choose for:

  • Normal – The default style.
  • Hover – The style when users mouse over the tab.
  • Active – The style when the tab is open.

Choose the border radius. For more details, see Border radius tools.

Set the inner spacing between the content’s edge and the accordion’s edge. Learn how to create space with padding and margins.

Accordion with nested elements 6
  • Customize the font style, size, and other typography settings for your title. For more details, see Typography.

    The headers can have three different styles:
    • Normal – The default style.
    • Hover – The style when users mouse over the tab.
    • Active – The style when the tab is open.
  • Color: Choose a color: either use the color picker or a global color.
  • Shadow: Click the 🖋️ icon to add a shadow to the title. Learn more about shadows.
  • Text Stroke: Click the 🖋️ icon to apply a stroke effect to the title. Learn more about Text Stroke.
  • Size: Use the slider to determine the size of the icon next to the tab title. For more details, see Units of measurement.
  • Spacing: Use the slider to determine the amount of room between the tabs’ title and the icon.
  • Color: Choose an icon color: either use the color picker or a global color.

    You get three styles to choose for:
    • Normal – The default style.
    • Hover – The style when users mouse over the tab.
    • Active – The style when the tab is open.
Accordion with nested elements 12 Accordion widget with nested elements 178

Choose the background. For more details, see Create a Background.

Choose the border type. For more details, see Border type.

Choose the border radius. For more details, see Border radius tools.

Set the inner spacing between the content’s edge and the individual accordion’s edge. Learn how to create space with padding and margins.

Advanced tab

The Advanced tab provides options to control the widget position, adjust the spacing, add custom code, and more.

Accordion with nested elements 5

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Wait! You get 30-Day Money-back Guarantee

You have nothing to lose – but the discount

days
hours
minutes
seconds