Accordion

Frequently asked questions or FAQs are very common and almost present on each and every website, and those are achieved with elements such as the accordion. Here is a good example I've created, and you can see you have a question, and then you have the information inside it, and then you can go to the other questions, and if you click on it, it opens a new content section. This one only contains a button. What is important to understand every time we talk about these elements, which I refer to as content or container elements, elements within the builder, is that you can add anything from the elements drawer here. The accordion structures it, but all the elements can go in here. Let's look at how you bring it in and how you work with it. Let's bring in another one. I'll go to the add elements drawer, click, hold, and drag the accordion element and drop it. And this is what we get by default. Let's talk about the content first. You get two accordions, and you will see this one comes with an icon and this one comes with a button. You will place the elements that you need in here.

If I have a heading, I bring in a text element, I can bring in columns. And again, you build it out the way that works for you. The settings of the accordion element is in the top right-hand corner. You have your normal settings like padding and margin, duplicate and delete, and then the option to use tags. Select the label, and the options on the left gives you a collapsible accordion, which you can switch off, and then the duration is the transition from selecting one accordion to the following. This is where you will add the tags for this accordion and add an icon for indicating how you can drop it down and move it up. This can be styled out with size as well as the spacing between the accordions. Most of the accordion is about styling. Within the label, you can add your label or you can type any question that you want to add. Build out your content and go ahead and change this one too. Bring in more accordions by selecting any of the accordions and click on the duplicate Click on the Locket button and it will duplicate the one. If you are going to use the same format for all of them, go ahead and style out one completely.

And then after you've done that, you duplicate it so that you can use the same style format for that one, just changing out the content. If you need to move your specific one up or down, you have these arrows, so I can move it down to the bottom and click up to move it to the top. Center alignment of your labels to the right or to the left. The real challenge, almost, of the accordion is to make it look good. Now, you're going to do with the styling. You have a lot of options here for your text, which is your label. Then you can also add a background, a border, and a shadow. Then you have hover options where you can have different colors for the hover. And then here is the active. With this one open, if I make it active, And now you have this one that stands out very clearly from the rest. As I hover over this, you see the text turns black. And as I selected, it takes the active color styling. As always, you need to go and have a look at how this will look on a tablet and how it will display on a mobile.

A good tip here is before you start duplicating these accordions, make one, style it out perfectly, go and test it on responsive use, and only then you start duplicating them on the desktop, and they should work then perfectly for your tablet and mobile.