Synced Accordion

An image accordion. One panel is open and wide, the others fold into narrow strips that show their titles. Point at a folded panel and it opens. Text and a progress bar placed anywhere on the page follow the open panel.

What you can customize

Everything is set from the property panel. No code needed.

- Panels, up to 10: image, tag, title, text and link

- Open on hover or on click

- Start panel and autoplay with a timer bar

- Height, folded width, gap and radius

- Shade over the images, for folded and open panels

- Fonts for the title, the folded titles and the text

- Numbers shown or hidden

- The width at which the panels stack

- Linked Text: title, text or counter, with its own font and color

- Linked Progress: colors, thickness and radius

Details

- Set Type to Text or Progress and use the panels' Group name. That layer shows the open panel's title, text, number (02 / 05) or progress, anywhere on the page.

- Autoplay pauses on hover and off screen.

- On narrow screens the panels stack. The open one is tall and the others become short rows with their titles.

- A click or a tap always opens a panel, so hover mode works on touch screens.

- Arrow keys, Home and End move between panels.

- Panels are typed in by you. They are not loaded from a CMS collection.

How to use

Add the component to your page and set its width to Fill. Open Panels and add your images, titles and links. For linked text, paste another copy, set Type to Text and choose what it shows. On the canvas the panels do not react. Open the preview to try it.

Code

This is a code component. Unlinking is not available, so the source cannot be viewed or edited. Updates arrive through the Update button in your Assets panel.

Support

Email joviseo1106@gmail.com. Replies usually take up to 3 business days. More components are at https://joviseo.vercel.app