Elements - Accordion-Preset

How to work with accordions / connecting trigger and content

Accordions are a great way to conceal some less relevant content until it is needed or simply to keep a clean layout. Sitejet offers the necessary scripts, built-in functionality of almost all elements and some powerful customizable presets for you to use right away.

For this example we will use a preset called Accordion which you can access by clicking "+ Add content" on the top-left Toolbar. Choose "Presets" (left tab) and open the "Structure" tab below. You can Drag & Drop the preset into your main editor or double-click to paste it after the last element that has been selected.

1. This is the trigger. It is basically an .ed-headline container consisting of a <h3> child-element. Headlines, among other elements, can be used as a link to refer to webpages. files, other elements and so on. You can check out the details of its structure in the Config CSS in your asset manager. Access the trigger's settings to the left by double-click the element or pressing [ENTER] after selecting it.

2. This is our Accordion's content. We used a container element and put an animation on it (see 3.). There are other articles covering animations in depth. For now, this is all we need to know since it has all been already set by our preset. Inside we've got a text element which will be our main content. Inside the parent container you can add anything you want, like images, videos, headlines etc.

3. As mentioned before we need to have an animation set upon our container for the Accordion to work. Elements with animation are indicated with a star-icon in front of the element name in the breadcrumbs at the bottom. This is also the element whose ID we need in order to link it to the trigger. Now we need to open the trigger's settings, by double-clicking on the trigger (which is the headline element). This opens up the settings to the left. Navigate down to Link and make sure to select Next Element. This will link to the very next element in the DOM, in this case to the content that is animated. 

Note: make sure you don't place any other element (e.g. a spacer) between the trigger and the content, otherwise the link to next element function will not work.

Now we successfully linked the Accordion trigger to our content. Make sure to test it by using our preview mode under "View" or by pressing [Ctrl + P].

Setting up image accordions

Accordions are a great way to reveal certain contents only when requested by the user. By using an image accordion this can be accomplished in a creative way, with images being used as thumbails.

Let's include the preset

1. You can access the presets by pressing [CTRL+ENTER] or clicking on + Add Content. Choose image-accordion in the Accordion tab and double-click to paste it into the main canvas after the currently selected element. You can also simply drag and drop the preset to the desired location.

2. You will get an image (2.) and a content box (3.) with a headline and some placeholder text. The orange notations indicate that Trigger 1 belongs to Content 1. Double click the image to access its settings panel on the left side. Here you can change the image and edit it as necessary (e.g. cropping it to a certain aspect ratio, desaturate or apply a blur effect). The text on the trigger can be typed into the Image caption in the Text tab.

3. This is your content box directly beneath the image trigger. Make sure not to place anything else between the two elements, or step 4 will not work properly. 

4. Here 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. Should there be any other element between image and content, the accordion will not work as expected anymore.

5. To create more triggers (and content boxes) you can either select the according element and press [CTRL+D] to duplicate, or you can click the small icon while hovering above the element. This will create a copy for you right after the original. It's important to move the new trigger below the existing content, so it doesn't interfer with the Link to Next Element function preiously mentioned. The same applies to each new content box. 

This is how it should look like after creating a couple trigger and content boxes. Even in desktop view they are ought to be beneath each other. But don't worry, on the live page it will look like this:

Be aware of the amount of trigger items

There is virtually no limit to how many triggers and content boxes you can display within your image accordion. You need to adjust one more thing, should there be more than 10 trigger items in total.

7. Make sure to adjust the Number of items in the preset settings. This will ensure that the order of trigger and contents will not be messed up. You can set this value higher than the amount you actually need. Just make sure it's never less than your actual amount of trigger items.

These principles apply to all the accordion presets in Sitejet.

Still need help? Contact Us Contact Us