Joomla module

Meet Unfolder.

A hero that doesn't slide, spin, or make anyone wait.

Up to seven panels share one space. Hover, click or tap one and it unfolds, bringing its image, video, headline and buttons with it. The rest step politely aside. That's the whole trick, and it's a good one.

Download free Watch it unfold Stand-Alone Prototype

Joomla 5.4 & 6 · About 5 KB · No jQuery, no framework, any template

Mr. Fishie at a cluttered studio desk, surrounded by the team: a donkey, a goat, a dog in a pirate hat and red coat, a black-and-white cat perched on the monitors, a cleaner wrasse in a fish tank, an orange kitten trying to open a case of more orange, and a paint horse wearing headphones, all amid sticky notes, coffee mugs, and design books.

Chaotic Fish Design Team

The Team

The Chaotic Fish Design Team. Let's face it, there's too much to put into the caption. Take a closer look... if you dare.

Meet the Team

Yes. Actual video

Sample Video option

Sample video of flowers opening up

With Audio

YouTube Sample

Cinematic Trailer Thriller Teaser by Infraction

YouTube Link

Vimeo Sample

Check out Vimeo option

Short action cinematic epic intro. Ideally for your project! (Vimeo doesn't allow audio to be played in a background field)

Link to Video

Half-Ton Puppy

Tancho Issa Koi Fish

Professional Mud Enthusiast, Full-Time Guardian, Occasional Phone Thief

Meet the family

Why it exists

Sliders hide things. Grids just sit there.

Sliders make visitors wait for the good part, and most never see slide three. Static grids show everything at once, so nothing stands out. Unfolder sits in the middle: every option is visible from the first second, and the one someone chooses gets the whole stage.

In plain terms, it's a row of side-by-side panels. Pick one and it opens wide to tell its story, while the others slim down to labelled strips you can jump to next. On phones, the panels stack or turn into swipeable cards.

What's in the box

Small module. Big reveal.

Starting states

Two ways to begin

Equal columns over one shared cover image, or a single panel already open. Your call.

Open width

Unfolds as far as you say

Set the open panel anywhere from 50% to 85% on a slider. Strips never shrink past readable.

Video

Video that waits its turn

MP4, WebM, YouTube or Vimeo as silent background loops. Nothing loads until its panel opens.

Sound & captions

Volume on request

An optional speaker button and WebVTT captions for file-based videos. Silence stays the default.

Mobile

Phones get their own plan

Stacked bars that expand on tap, or a swipe row of full cards. You choose the breakpoint.

Auto-rotate

Knows when to stop

Optional rotation that pauses on hover, stops when someone clicks, and comes with a pause button.

Accessibility

Everyone gets the tour

Real buttons, full keyboard support, reduced-motion respect, and never more than one H1.

Performance

Light on its feet

About 5 KB of CSS and JavaScript. No jQuery, no framework, loaded once per page.

YouTube With Audio

Fashion Deep House by Infraction[ No Copyright Music] / Minimize

Infraction is one of the safest YouTube channels dedicated to no copyright music for content creators. Fashion Deep House no copyright music by Infraction.

Vimeo Kicker

Vimeo Title

Vimeo Text

Lighthouse with flowers against cloudy night sky scenic composition

Free Image

Muh Faris - Photo of Sky

Lighthouse with flowers against cloudy night sky scenic composition

Link to Artist Page Site link

Where it earns its keep

One hero, several stories.

Hospitality

Rooms, dining and activities, side by side in one hero.

Services

Divisions and offerings without a wall of cards.

Portfolios

A project per panel, with video where it helps.

Campaigns

Seasonal promos. Hide a panel without deleting it.

For the technical crowd

Under the hood.

Works with
Joomla 5.4 and Joomla 6, PHP 8.1+. No backward-compatibility plugins needed.
Dependencies
None. No jQuery, UIkit or Bootstrap JavaScript.
Weight
About 5 KB of CSS and JS, gzipped, via Joomla's Web Asset Manager.
Video
MP4/WebM from the media library or an HTTPS URL, YouTube (privacy-enhanced), Vimeo (private links too).
Captions
WebVTT, drawn in their own caption box so they never cover your buttons.
Settings
Panel count, starting state, open width, hover or click, auto-rotate, mobile layout and breakpoint, colours and type.
Theming
CSS custom properties, plus standard Joomla template overrides.

Ready to unfold?

Want Unfolder on your site? Let's talk.

Download UnFolder Plugin This email address is being protected from spambots. You need JavaScript enabled to view it. See it again Stand-Alone Prototype
zip
Module: Unfolder
Version 1.0.0
Filedate 2026-10-06
Size 65.04 KB
Downloads 3
Download

Unfolder

Changelog.

1.0.0

Stable · September 2026

First stable release. Tested on Joomla 5.4 and Joomla 6, in T4 and Cassiopeia, with two instances on one page, and checked with A11ytoolbar and Lighthouse.

  • Hover, press and sound-on styles for the pause, sound and rotation buttons (disabled for reduced motion).
  • Everything from the pre-releases below.

Pre-releases

0.1.5Video controls
  • Pause/play button on every video panel (media library, direct URL, YouTube and Vimeo), meeting WCAG 2.2.2. A paused panel stays paused when the visitor returns to it; with reduced motion, videos wait for the play button.
  • Sound for YouTube via Allow Sound, plus Show YouTube Captions.
  • Admin: panel rows can collapse and expand, with Collapse all / Expand all. Each row's header shows its number and label, updating as you type. Rows with validation errors open automatically.
  • Sound and pause buttons now announce their state through changing labels rather than aria-pressed.
0.1.4Eight new options
  • Image Shading slider (0–150%).
  • Mobile Image per panel and Cover Image (Mobile), served below the mobile breakpoint via <picture>.
  • Show From / Show Until scheduling per panel, checked on the server.
  • Text Position: bottom left, bottom centre or centre.
  • Link Name: links ending in #name open that panel.
  • Analytics events: unfolder:open and unfolder:close, with the panel label and what triggered the change.
  • Animation Speed: snappy, normal or relaxed.
  • Custom CSS field (the < character is stripped for safety).
  • Fix: the open panel's text box could be wider than the panel at narrow open widths (e.g. 50%), clipping the right edge of the text. It now sizes to the panel's actual open width.
0.1.3Gradients
  • Gradient backgrounds for panels and the cover: linear or radial, start/end colours plus an optional middle colour, and an angle. Colours are validated as hex values before output.
  • Cover fallback order: cover image, cover gradient, first panel image, first panel gradient.
0.1.2Bug fix
  • Fix: the Switching Between Panels setting was ignored on sites where a Bootstrap 4→5 compatibility script renamed data-bs-trigger to data-bs-trigger.
  • All Unfolder data attributes now use a data-unf- prefix (e.g. data-unf-trigger, data-unf-src), so Bootstrap shims and lazy-load scripts can't claim them. If you made a template override in 0.1.0 or 0.1.1, update its attribute names.
0.1.1Trigger option
  • "Desktop Trigger" renamed Switching Between Panels (Click / Hover), now defaulting to Click. Existing modules keep their saved setting.
  • JavaScript now treats a missing trigger value as click instead of hover.
0.1.0First release
  • 1–7 panels with All equal and One panel open starting states.
  • Open width and minimum strip width sliders.
  • Hover or click trigger; stacked or swipe mobile layouts.
  • Background video from the media library, a direct HTTPS URL, YouTube or Vimeo.
  • Sound toggle and WebVTT captions for media-library and URL videos.
  • Auto-rotation with a pause control (One panel open mode).
  • Accessibility: keyboard navigation, focus handling, reduced motion, single H1.
  • Standalone demo included.