DiviGrid · Image Accordion for Divi 5
Image Accordion: photos that open as you move
Side by side or stacked, opened by hover or click, with text in nine positions, 11 content animations and 12 border animations.
Seasons
Four panels, hover to open.
Architecture
Stacked panels that open down.
Dive centre
Icons and a content animation.
Dark sky park
An animated border on the open panel.
Villa rentals
Open on click, with a button.
Use case 01 · Shops & collections
Made for every season
Hearth & Field Outfitters · four collections, one for each time of year. Move across the panels to open each one.
Spring
Light rain shells and linen shirts for mild mornings.
Summer
Quick-dry shorts, wide hats and the swim bag.
Autumn
Wool overshirts and boots that like puddles.
Winter
Down jackets, thermal layers and real mittens.
Hover · rounded panels with a 6px gap in the page colour · dark fade from the bottom on the open panel · a button in every panel
Use case 02 · Architects & studios
Vela Architects
Five towers in glass and concrete, finished between 2019 and 2026. The panels are stacked: hover one and it opens down.
Vertical orientation · 640px tall · text on the left centre · thin white lines between panels · no rounding
Meridian Tower
Office · 2024 · 42 floors
Harbour Campus
Offices · 2021 · 3 buildings
Cobalt Residences
Housing · 2026 · 210 homes
The Edge
Culture · 2023 · gallery and hall
Rib House
Research · 2019 · labs
Use case 03 · Festivals & events
TIDEWATER WEEKEND
July 17–19 · three days on the seafront · 40 bands, one Ferris wheel
Friday
Main stage from 6 pm · headliner at 10
Saturday
Two stages · twelve hours of music
Sunday
Family day · fair rides free until 2 pm
Three panels · the text zooms in when a panel opens · thick dark lines between days · tall Anton titles
Use case 04 · Bars & restaurants
The Copper Still
Two hundred whiskies, five ways to drink them. Click a panel to open it; a copper frame draws itself around the open one.
Neat
A single malt, a drop of water, nothing else. From $12.
Cask strength
Straight from the barrel at 58%. Ask for the tasting notes.
The back bar
Two hundred bottles, sorted by region.
Old fashioned
Bourbon, bitters, orange peel. Stirred, never shaken. $14.
Not whisky
Gin, rum and alcohol-free cocktails for the rest of the table.
Click to open · border animation style 9 in copper · round copper icons · first panel open on load
Use case 05 · Wellness & retreats
Five days of doing less
Stillwater Retreat · a slow week by the sea. Every day has one practice, written on its photo.
Arrive
Day one
Breathe
Day two
Listen
Day three
Stretch
Day four
Rest
Day five
Equal panel widths · captions always visible · pill-shaped panels (200px radius) with an 8px sand gap · text fades up
Use case 06 · Tours & activities
Under the surface, every morning
Blue Hour Divers · five ways into the water, from a first try to a night dive. Boats leave at 8 am.
Try dive
Two hours, no licence needed, shallow reef. $95
Freediving
One breath, long and quiet. Two-day course. $280
Turtle bay
Our favourite site: green turtles most mornings. $120
Open water
Your first licence in four days. $460
Night dive
Torches, plankton and a very calm sea. $140
Text at the top left · square cyan icons · the open panel fades darker from the top · content fades in from the bottom left
Use case 07 · Parks, observatories & night tours
NIGHT SKY TOURS
Kestrel Ridge Dark Sky Park · no street lights for forty miles. Book a guided night under the Milky Way.
Milky Way walk
Two hours with a guide and a red torch. Fridays.
Above the clouds
Summit drive when the valley fills with fog.
Photo night
Long exposures with a pro photographer.
Forest camp
Sleep under the stars, breakfast at dawn.
Moon through a lens
Our 16-inch telescope on full moon nights.
Border animation style 4 in a violet-to-sky gradient · text centred in the open panel · Jack In The Box content animation
Use case 08 · Travel guides & blogs
Tokyo in four days
A first-timer’s plan from the Little Atlas travel blog: one area a day, trains in between. Hover a day for the plan.
Numbered titles at the top left · square panels with no gap · red fade on the open panel · 4 panels
01 · Shinjuku
Neon streets, tiny bars and the view from the city hall towers.
02 · Train day
A rail pass, a day trip to the coast and a bento on the way.
03 · Asakusa
Old temples in the morning, the tower at sunset.
04 · Parks
Gardens, a shrine in the trees and a last look from above.
Use case 09 · Gardens, florists & nature
What’s in bloom this week
Fernleigh Botanic Garden · five flowers worth the walk, with where to find them.
Gerbera
Glasshouse 2 · until May
Tulip
Long border · peak this week
African daisy
Rock garden · sunny days only
Cherry
Lake walk · two weeks left
Anemone
Woodland edge · all spring
Text in a white card at the bottom centre · the open panel has no overlay, the closed ones a soft green · third panel open on load
Use case 10 · Holiday rentals & hotels
Casa del Lago stays
Five houses between the hills and the lake. Click a house to see the price and check dates.
Click to open · white card with price and button · the card swings in from the left · first house open on load
Image Accordion Demo
Meet Our Experienced Team
Merry Wins
Fashion Designer
JHon William
Managing Director
Sarah Wills
Marketing Manager
599$
Light Maroon
499$
Sea Blue
399$
French Blue
Shop Today
Enjoy Your Training
Find Beauty in
Simplicity
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Hotel & Resort
Enjoy a Luxury Experience
Small Resort
Apartment
Luxury Room
Beach Room
Resort
Nature Photography
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Never Give Up
Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Best Food
Praesent dapibus, neque id cursus faucibus tortor neque egestas augue eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi tincidunt quis accumsan porttitor.
Cup Cake
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Burger
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Healthy Food
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Salad
Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus.
Tatto Artist
For Your Memories
Aliquam tincidunt
Cras ornare
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Donec consect
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Vestibulum auctor
Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Fashion Week
Praesent dapibus, neque id cursus faucibus tortor neque egestas augue eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi tincidunt quis accumsan porttitor. Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
Create Your Dream Brand
Aliquam tincidunt mauris
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.
Phasellus ultrices nulla
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.
Sedispi adipiscing ornare
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.
Donec consectetuer ligula
Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius. Suspendisse ac urna. Etiam pellentesque mauris ut lectus.
Every accordion above is one module
Image Accordion comes with DiviGrid, together with all our other Divi modules.