Accordions

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

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].