An interactive two-column accordion for Framer that pairs expandable content with a matching image or looping video. Select a panel to reveal its description and optional link while the media on the opposite side transitions smoothly to match.
Framer code component, ready to use in your project
Editable accordion panels with image or video media
Optional links and custom link labels
Desktop and mobile layout options
Static canvas rendering for easier positioning
Content: add or remove panels, edit titles and descriptions, set links and link labels
Media: assign an image or MP4 video to each panel
Header: show or hide the eyebrow and heading, customize their text and heading width
Typography: separate fonts for eyebrow, heading, panel titles and descriptions
Colors: background, accent, text, muted text and divider colors
Spacing & Shape: container and media radius, panel padding, icon size and title-to-description gap
Interaction: animated panel expansion, image and video crossfades, plus/minus icon transitions
Add Accordion Media to your Framer canvas
Edit your panels and assign an image or video to each one
Customize the layout, typography, colors and spacing in the properties panel
Preview the component and select different panels to see the content and media update together
Built with React and Framer Motion
Supports image and looping MP4 video media
Only one accordion panel is open at a time
Desktop displays the accordion and media side by side; mobile stacks the active media below its open panel
The canvas uses a static rendering mode to keep the component easy to position
The component includes an optional heading area that can be hidden for a more compact layout