Accordion Preset

Accordions are a great way to reveal certain contents only when requested by the user and to create a clean layout. This article will show you how to use accordions in Sitejet.

How to work with accordions

You can add an accordion by clicking on the category "Accordion" on the sidebar. 

Simply drag & drop the preset 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 preset it looks like this in the website editor:

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

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 our Accordion's content. Our content can be anything. 
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 preset, 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. 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:

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 preset for you. 

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 the Media Manager.
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 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] 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 having a look at the labels so that "Trigger 1" is followed by  "Content 1" and so on 

Become a part of our Community!

Exchange ideas with other web designers about current developments, tips, and tricks and show your favorite sites. Get advice and talk to us about possible features you would like to see on Sitejet. You can join the Sitejetters community here.

Back to the top