First things first, log in to your Adalo account at adalo.com. Once you're in, pick the app where you want to add that nifty accordion component.

Make sure you've got a screen ready for the accordion. If not, just click the "+" icon on the left panel and choose "Add Screen". You can either pick a template or start with a blank screen. Your call!

On the left panel, click the "+" again to open up the Components Marketplace. This is where all the magic happens, and you can find all the components you need for your app.

In the Components Marketplace, use the search bar at the top and type "Accordion". Hit Enter to see the results.

Click on the Accordion component from the search results. Then, hit the "Install" button to add it to your account. Now, the accordion component will show up in your list of available components in the editor.

Head back to your screen and drag the Accordion component from the left panel onto your canvas. Easy peasy.

Click on the Accordion component on your canvas to open its properties panel. In the Header section, type in the text you want as the title of the accordion. Feel free to tweak the font, size, and color to your liking.

Scroll down to the Content section in the properties panel. Here, you can add whatever elements you want to show when the accordion expands. Text, images, buttons—go wild!

Use the properties panel to further customize how the accordion looks. Adjust things like background color, border radius, and shadow to make it fit perfectly with your app's design.

Click the "Preview" button at the top right of the editor to test your accordion. Make sure clicking the header expands and collapses the content just the way you want.

Don't forget to click the "Save" button to save all your changes. This way, your accordion component will keep all its settings.

And there you have it! Follow these steps to add and customize Adalo's accordion component in your app.