Toggle and Accordion In WordPress

Guide & tutorial to learn how to use toggle widget & accordion element on WordPress to create a FAQ with Elementor, block editor, or WPBakery

Updated on April 11, 2024
Toggle and Accordion In WordPress

In this tutorial on Visualmodo knowledge base, we show you how to create and use these elements in our WordPress themes: the Toggle and Accordion In WordPress page builder elements and efficiently to help you build a great page on your WordPress and beautifully show content. Learn how to use the toggle widget and accordion element on your WordPress to create a FAQ with Elementor, block editor, or WPBakery in this guide & tutorial.

What Is WordPress Toggle and Accordion?

The Accordion Toggle element allows you to set the functionality to accordion or toggle. View the demo site to find out the difference. You can style the accordion elements and assign background colors, borders, and more, so it will easily fit your theme design requirements.

Add as many accordions on your pages within your site. In addition, uses to minify content on page load and let the user decide what is essential for him to read. A great feature of use could be to use the accordion on your Frequently Asked Questions pages. The payment is a one-time fee per site.

Elementor Free Page Builder Toggle and Accordion (FAQ) Widget Video Tutorial

To use the Toggle and Accordion widgets on Elementor Free Page Builder, follow the steps below:

  1. Open the Elementor editor for the page where you want to use the Toggle or Accordion widget.
  2. From the widgets panel on the left-hand side, drag and drop the Toggle or Accordion widget onto the page.
  3. Configure the widget settings according to your needs. You can customize the content, design, and behavior of the widget.
  4. Click the “Add Item” button in the widget settings panel to add more toggles or accordions. You can then add more titles and content for each toggle or accordion.
  5. Once you are done customizing the widget, click on the “Publish” button to save your changes.

Here are some additional tips for using these widgets:

  • The Toggle widget displays a single item at a time, which can be expanded or collapsed by clicking on the title. The Accordion widget displays multiple items, but only one item can be developed at a time.
  • You can use the Style tab in the widget settings panel to customize the widget’s design. You can change the font size, color, background, border, and more.
  • You can add your text, images, or other media to the widget using the Content tab. You can also use shortcodes or HTML code to add more complex content.
  • The Behavior tab allows you to control how the widget behaves when the user interacts. For example, you can start with all items expanded or collapsed or enable multiple items to be developed simultaneously.

WPBakery Page Builder Toggle and Accordion (FAQ) Usage Video Guide

Open the admin area of your WordPress / dashboard. Go to pages, add new, select the ‘Back-end’ button, and click the ‘Add element’ button in the element selector window. Select the ‘Borderless‘ tab, as shown in the attached photo below. Finally, an accordion section will be added to your content, and you can edit the content and style as shown in the video tutorial.

In conclusion, now you’re ready to play with your WordPress website’s toggles and accordions section. As a result, generate functional layouts like F.A.Q. Pages.

Toggle and Accordion In WordPress using our WordPress themes – By Visualmodo. Learn how to use the toggle widget and accordion element on your WordPress to create a FAQ with Elementor, block editor, or WPBakery in this guide & tutorial.

Can’t find what you’re looking for?

Contact Support