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, text, buttons, interaction behavior, sizing, overlays, colors, 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

How to embed Accordion Slider Widget to WordPress

1Get your embed code

After customizing your Jotform website widget, click Try it on your website for free, and copy the generated embed code.

2Open the page editor

Go to the WordPress post or page where you want to display the widget, then add a new block.

3Add a Custom HTML block

Select Custom HTML and paste your Jotform Website widget embed code into the HTML field.

4Update and view

Click Update or Publish, then open the page to check your embedded widget.

Learn more

Create Panels With Media, Copy, Links, and CTA Buttons

Build each accordion panel as its own mini content block so visitors can scan the whole set and expand the detail that matters.

Panel fields include:

Image URLVideo URLBadgeTitleDescriptionButton textButton URL

Build Your Panels

Create Panels With Media, Copy, Links, and CTA Buttons

Switch Between Horizontal and Vertical Accordion Layouts

Use a wide horizontal accordion for visual impact or a vertical version for compact editorial sections and mobile-first pages.

Layout controls include:

Horizontal layoutVertical layoutCollapsed panel size

Choose a Layout

Switch Between Horizontal and Vertical Accordion Layouts

Choose Hover, Click, and Behaviors

Control how the accordion responds to visitors and keep panels moving automatically when your page needs a more dynamic showcase.

Interaction controls include:

Hover activationClick activationDefault active panelAutoplayPause on hover

Customize Behavior

Style the Accordion Slider to Match Your Page

Control the frame, panel overlays, badge colors, CTA colors, media fit, corner radius, spacing, branding, and advanced CSS.

Style controls include:

Color schemeCustom hex colorsButton stylePanel corner radiusPanel gapWidget paddingMedia fitSlide effectJotform brandingCustom CSS

Customize Your Accordion Style