The Toggle Widget allows you to create collapsible text boxes on your website. Initially, these text boxes display only the titles, keeping the content compact. Visitors can click on these titles to expand and view the content inside. This feature is especially useful for FAQs or any content that you want to present in a concise manner.
Note:
If you enable Elementor’s Nested Elements experimental feature from Elementor Settings Features section of WordPress Dashboard, the new Accordion widget will replace the Toggle widget including its functionalities. The Toggle widget will no longer be available, however existing toggles will remain unaffected and can still be edited.
Differences between Toggle and Accordion widgets
The Toggle widget and the Accordion widget are similar, but there are two key differences:
- When a page loads, all items in the Toggle widget are collapsed. In contrast, the Accordion widget keeps the first item expanded while the rest are collapsed.
- The Toggle widget allows visitors to expand multiple items simultaneously, whereas the Accordion widget restricts visitors to expanding only one item at a time. You can learn more about Accordion Widget here.
Adding Toggle widget
- Open the page where you want to add the widget.
- Locate the Toggle widget in the widget panel and drag it onto the canvas.
- Configure the widget settings below as desired.
Content tab
- Toggle Items: Enter the title and description for each toggle item. Use the Add Item button to add more toggle items to the list.
- Icon: Select the icon to represent the action of expanding an item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab will be shown in the Library, showing recommended icons to represent the expanding concept.
- Active Icon: Select the icon to represent the action of collapsing the active item. Choose either None, Upload SVG, or select an icon from the Icon Library. If Icon Library is chosen, a Recommended tab is shown in the Library which shows recommended icons to represent the collapsing concept.
- Title HTML Tag: Set the HTML tag used for the title to H1-H6 or DIV.
- FAQ Schema: Use the toggle to enable or disable the option to use schema.
Style tab
Toggle
- Border Width: Set the thickness of the border around the toggle widget and between each item.
- Border Color: Choose the color of the border around the toggle widget and between each item.
- Space Between: Set the amount of space between each item.
- Box Shadow: Set the box shadow around the toggle widget, or around each item if there is space between each.
Title
- Background: Choose the color of the title’s background.
- Color: Choose the color of the non-active titles’ text.
- Active Color: Choose the color of the active title’s text.
- Typography: Set the typography options for the titles.
- Text Shadow: Click the icon to add a shadow to the title.
- Padding: Set the padding for the titles.
Icon
- Vertical Position: Align the icon vertically to the Top, Center, or Bottom.
- Alignment: Align the icon to the left or right of the title.
- Color: Choose the color of the icons.
- Active Color: Choose the color of the active icon.
- Spacing: Control the spacing between the icon and the title.
Content
- Background: Choose the background color of the content.
- Color: Choose the text color of the content.
- Typography: Set the typography options for the content.
- Text Shadow: Click the icon to add a shadow to the description.
- Padding: Set the padding for the content.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.