Accordions are a great way to hide less relevant content until it is needed, or just to get a clean layout. This article will show you how to use accordions in Sitejet.
Table of contents
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 "+Content" on the top-left Toolbar. Choose "Presets" (left tab) and open the "Accordion" 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 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.
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 thumbnails.
Let's include the preset
1. You can access the presets by pressing [CTRL+ENTER] or clicking on +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 theText 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 interfere with the Link to Next Element function previously mentioned. The same applies to each new content box.
Be aware of the amount of trigger items
There is practically no limit to how many triggers and content containers you can display in your accordions. If you want to display more than 24 trigger elements in total, just adjust the maximum number in the settings. This setting guarantees the performance of the website and should only prevent your customer from creating more elements than you intended.
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.