Website Widgets

Accordion Slider Widget

Create Your Own Accordion Slider in Seconds for Your Website

Build a responsive accordion slider for portfolios, galleries, product features, restaurant menus, travel highlights, and homepage showcases. Add panel media, optional content and buttons, interaction behavior, transitions, alignment, colors, typography, and scoped CSS in a no-code builder.

Create Your Accordion Slider - It's Free!
Create Your Own Accordion Slider in Seconds for Your Website Hero Bg Image

Create Flexible Panels With Media and Optional Content

Build each panel as its own content block, keep it even when media is empty, and duplicate it with its image, video, or poster intact.

Panel fields include:

Image uploadVideo URLPoster imageBadge toggleTitle toggleDescription toggleCTA button toggleMedia duplication
Build Your Panels
Create Flexible Panels With Media and Optional Content

Switch Between Horizontal and Vertical Accordion Layouts

Use a wide horizontal accordion on desktop or a vertical version for compact editorial sections. Mobile automatically uses a readable stacked layout.

Layout controls include:

Horizontal layoutVertical layoutCollapsed panel sizeText alignmentFull widthDesktop visibilityMobile visibility
Choose a Layout
Switch Between Horizontal and Vertical Accordion Layouts

Control Interaction, Transitions, and Autoplay

Choose how panels open, how quickly content transitions, and whether the accordion advances automatically.

Interaction controls include:

Hover activationClick activationInitially open slideTransition presetsAutoplayAutoplay timingPause on hoverCollapsed labels
Customize Behavior
Control Interaction, Transitions, and Autoplay

Style the Accordion Slider to Match Your Page

Start with the preset style or edit the complete color set, then apply one corner radius, choose a font, control branding, and add scoped CSS.

Style controls include:

Light presetCustom hex colorsPanel overlaysBadge colorsText colorsButton colorsShared corner radiusFont pickerJotform brandingCustom CSS
Customize Your Accordion Style
Style the Accordion Slider to Match Your Page