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.

Select the Design section of the Content/ Design menu to adjust accordion design.

1. Under Layout, you can choose from multiple preformatted accordion layouts.

2. Beneath Title Style, select your preferred font, font size, font color, font format, text alignment, and text direction. You can also add a background color and bottom border, if desired.

3. Before moving on to Description Design, click on an accordion item on your page to view a description, if a description is not already open. Now you can see changes as you make them. Under Description Style, you can choose your font, font size, font color, font format, text alignment, and text direction.

4. Now, adjust how your accordion icons appear. Beneath Expandable Icon Style, select your preferred icon color, size, background color, and spacing. You can also add rounded corners to the icon background.

5. Move on to Frame Style. You can add a background color to your frame, which appears behind your description and title, if no color has been set already. You can add a border to your frame, as well as rounded corners. Adjust the space between items and the padding on the sides of your accordion as desired.