How to Create a Responsive Accordion Slider in Divi

An accordion slider is a fun and engaging way to display content in a small space. Accordion sliders usually consist of multiple elements (or panels) stacked horizontally like the folds of a curtain. And when you hover over one of the panels, it expands to reveal content as the other accordion panels contract. This is where we get the accordion type effect of expanding and contracting.

In this tutorial, I’m going to show you how to create a responsive accordion slider in Divi using nothing but CSS. To do this we will be using multiple Divi modules to serve as accordion panels. Any module could be used, but for this example, we are going to use blurb modules in a very creative way to build a beautiful accordion slider that looks (and works) great both on desktop and mobile.

Check it out!

Sneak Peek

Here is a quick peek at what we will be building in this tutorial.

Desktop

Tablet and Phone

Download the Divi Responsive Accordion Slider Layout for FREE

To lay your hands on the accordion slider designed in this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our newsletter by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

Download the Files

Download For Free

Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.

DOWNLOAD

You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!

Subscribe To Our Youtube Channel

To import the layout to your page, simply extract the zip file and drag the json file into the Divi Builder.

Let’s get to the tutorial shall we?

What You Need to Get Started

To get started, you will need to do the following:

1. If you haven’t yet, install and activate the Divi Theme installed (or the Divi Builder Plugin if not using the Divi Theme).
2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
3. Upload about 5 different mock images to the media library to be used for the background images needed in the tutorial.

After that, you will have a blank canvas to start designing in Divi.

Creating a Responsive Accordion Slider in Divi

Creating the Row

To start, add a one-column row to the regular section.

Then open the row settings and update the following:

• Gutter Width: 1
• Width: 100%
• Max Width: 800px
• Height: 400px (desktop); 700px (tablet and phone)

The width and max width values can be changed to whatever you need. The accordion will scale and function within any row width. Also, it is very important to set a fixed height for the design to work. The child elements (column and modules) will have a height of 100% so if you don’t set the fixed height of the row, the child elements will not have a height at all.

Column Settings

Now that we have a set height for the row, open the column settings and add the following CSS to the main element:
Desktop

display:flex;
flex-direction: row;
align-items:center;
height: 100%;

Tablet

display:flex;
flex-direction: column;
align-items:center;
height: 100%;

The flex property will align the accordion panels horizontally on desktop and vertically on tablet and phone. The 100% height will allow the modules we will add to use the 100% height value as well.

Creating the Accordion Panel with Blurb Modules

The accordion slider can be built using any type of module(s). If we wanted to we could use a combination of different modules to serve as our accordion panel. But for this design, we are going to use blurb modules.

Begin by adding a blurb module to the row.

Designing the Blurb Module

Open the blurb module settings and update the following:

Keep the mock title and body content. We can always change that later.

Then update the blurb icon as follows:

• Icon (desktop): horizontal arrow line icon (see screenshot)

• Icon (hover): check icon (see screenshot)

• Icon (tablet and phone): vertical arrow line icon (see screenshot)

Background

Then give the blurb a background image and a gradient overlay on hover as follows:

• Add a Background Image at least 1000px wide
• Background Image Position: Center Left

Then add a gradient background overlay on hover.

Hover

• Background Gradient Left Color (hover): #3e215b
• Background Gradient Right Color (hover): rgba(0,0,0,0)
• Gradient Direction: 90deg
• Place Gradient Above Background Image: YES

Icon

• Icon Color: #ffffff
• Image/Icon Placement: Left

Next, jump over to the design tab and update the following:

Title and Body Text

• Title Font: Poppins
• Title Font Weight: Semi Bold
• Title Text Color: transparent (desktop), #ffffff (hover)
• Title Text Size: 22px
• Body Text Color: transparent (desktop), #ffffff (hover)

Height and Box Shadow

After the text is styled, give the module a 100% height and a box shadow as follows:

• Height: 100%
• Box Shadow: See Screenshot
• Box Shadow Horizontal Position: -12px
• Box Shadow Vertical Position: 0px

Blurb Custom CSS

In order to get our accordion panels (or blurb module) to expand and contract with the rest of the modules, we need to add some custom css to change the size of the module with flex-grow. Since we are going to have a total of 5 modules that make up the accordion, we add “flex:1” for the default state and then change it to “flex:5” on the hover state.

Under the advanced tab, add the following custom CSS the Blurb Main Element:

Desktop

flex:1;
position: relative !important;
transition: flex 800ms !important;

Tablet

flex:5;

Then add the following custom css to the Blurb Content CSS:

Desktop

position: absolute !important;
width: 280px;
padding: 20px;
transition: color 400ms;

Tablet

position: relative !important;
width: 100%;
height: 100%;
padding: 20px;
transition: color 400ms;

Overflow and Transition

• Horizontal Overflow: hidden
• Vertical Overflow: hidden
• Transition Duration : 400ms
• Transition Speed Curve: Linear

Alright! That was some serious customization to a blurb module. But the good news is that all we need to do is duplicate them to create the remaining accordion panels.

Duplicating the Blurbs for More Accordion Panels

Hover over the blurb module and click the duplicate icon four times to create a total of five accordion panels (or modules).

Then update the background images for each of the new blurbs you duplicated.

Final Result

Desktop

Tablet and Phone

Final Thoughts

This responsive accordion slider really does have some unique elements that make it fun to use. The accordion panels expand and contract seamlessly on hover without any unexpected glitches. And the blurb icons change on hover and on mobile in order to boost UX. Hopefully, this design will come in handy for your next project.

I look forward to hearing from you in the comments.

Cheers!