Accordion

Accordions are a great way to reveal certain contents only when requested by the user and to create a clean layout. 

How to work with accordions

You can add an accordion by clicking on the category Accordion in the left Content Sidebar. 

Simply drag & drop the section template to your preferred position on the website, or click once to paste it after the last element that has been selected. Once you added an accordion, it looks like this:

As you can see, an accordion always consists of a trigger and a content part: 

1. This is the trigger. Headlines, among other elements, can be used as a link to refer to web pages, files, or other elements - in this case, our content. You can customize the trigger by changing the settings in the left panel when double-clicking on it.  
2. This is the accordion's content. Our content can be anything, e.g. a text element or an image or a table.
3. In our example, we used a container element and added a text element (4.) to display the content. 

As you can see in the following image, you can add anything to the parent container element, like images, videos, headlines, etc. Here, we added an image element above the text element: 

In order for the content of this accordion to be visible once the trigger was clicked, an animation is needed. Since this is a section template, the animation was already added to the container element. However, you can use these settings to change the animation, e.g. how it opens, or how fast it opens, or if the first item should be open or closed at the beginning. Elements with animation are indicated with a star icon in front of the element name in the breadcrumbs at the bottom. 

Once you customized the accordion to your needs, you can activate the preview mode by clicking the eye icon in the top bar. This allows you to test how the accordion works. 

Tip: The first content container is set to be visible by default. If you want this container only to be seen on click as well, go to the animation settings for this container and select Element hidden for Initial. 

Image accordions

As we already mentioned, you can use different elements as triggers. Instead of a headline, you can also use an image element. In that case, the Image tabs is a helpful section template. 

Once you have added the image accordion to your website, you will see this: 

1. In this example, the image element is our trigger. You can change the placeholder image by uploading a new image or selecting an image from Files.
2. You can add text on top of the image by changing the placeholder text. 
3. Under Link you can link the trigger to anything, be it another page, external sources, or a certain element. For this accordion and accordions in general, the Next Element option is the most useful. That is why it's already been selected. It will link the trigger to the subsequent element or container in the editor. In this case, our content box. 

To create more triggers and content boxes, you can either select the trigger and press [CTRL]+ [D] (or [CMD]+ [D] on macOS) to duplicate it, or you can click the small copy icon while hovering above the element. When coping accordion items, make sure that the trigger and its corresponding content are still below each other, otherwise the link mechanism Next element will not work as intended. You can easily check this by hovering over the elements and taking a look at the labels so that Trigger 1 is followed by Content 1 and so on.