How to Design an Accordion in Duda

Welcome to Duda Dojo, where we discuss all-things Duda!

In this tutorial, we cover designing an accordion in Duda, including adding the accordion widget to your column, editing accordion content, and customizing the design.

Duda recently updated the accordion widget and it is now packed with even more features like the ability to add images, buttons, and format each separate item in a unique way.


Let's discuss the some of the main ways to utilize this widget to display information in a helpful and organized fashion.

There are two ways to add an accordion to your page.

1. Right click on an empty column. Hover over Add – Widget below – More widgets. From here, search for an accordion. 

2. Alternatively, navigate to the Widgets tab on the left menu. Search for an accordion and drag it to your empty column.

1. Click on the accordion widget to view the Content/ Design menu. 

 2. Select an item to adjust the item Title, Title heading type, and Description.

3. Below Items on the Content menu, you can adjust what is seen on your accordion.

a. “Show first item expanded” shows the description of your first accordion item.

b. “Only show one item expanded” allows you to choose to show only one item expanded at a time, rather than allowing users to expand all items at one time. 

c. “Enable FAQ Schema” lets Google browse your FAQs and add them to the search page.