Horizontal List Section Image Accordion
This horizontal image accordion turns a standard Squarespace auto list section into an interactive expanding gallery.
Each item sits in a narrow vertical panel until it becomes active. When selected or hovered, that panel expands horizontally to reveal more of the image along with its title and supporting text, while the other items contract to make space.
The result is a compact way to display team members, projects, services, portfolio items or featured content without showing everything at full size at once.
It was made by starting with a normal Squarespace Auto Layout List Section.
Images and text were added to each list item using Squarespace’s existing content controls.
The section was then selected with Compose and transformed into the horizontal accordion interaction.
Compose handles the expanding and collapsing behaviour, transitions, active-item sizing, image treatment and text reveal, while the underlying content remains part of the original Squarespace list.
Setup to make with Compose:
Add an Auto Layout List Section in Squarespace.
Add an image, title and supporting text to each item.
Style the basic section in Squarespace first.
Open Compose and select the entire list section.
Ask Compose to turn the items into a horizontal accordion.
Make the active item expand while the remaining items contract.
Reveal the text only on the active item and add smooth animated transitions.
Starting Prompt:
Create a horizontal image accordion from these Squarespace list items. Each item and image needs the same height, evenly spaced across the section width. On hover, expand an image with an animation and shrink the others, revealing the text over the image. Start with the first item open; each hover stays active until I hover the next.