An accordion slider is a fun and attractive way to display contents in a restricted space. Accordion sliders are usually made of several elements (or panels) stacked horizontally, like the folds of a curtain. And when you hover over one of the panels, it expands to reveal the contents while the other accordion panels contract. This is where the accordion effect of expansion and contraction is achieved.

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

Check it out!

Preview

Here is an overview of what we will build in this tutorial.

Create a slider with an accordion on divi

Let's start the tutorial

What you need to get started

To begin, you will need to do the following:

  1. If you haven't already, install and activate the Divi theme installed (or the plugin Divi Builder if you are not using the Divi theme).
  2. Create a new page in WordPress and use Divi Builder to edit the page on the front-end (visual constructor).
  3. Download about 5 different images in the library to use as background images needed for the tutorial.

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

Create a slider with a responsive accordion on Divi

Creation of the line

To begin, add a row of a column to the regular section.

Choose a divi layout

Then open the settings for the line and update the following:

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

The width and max width values ​​can be changed according to your needs. The accordion will be scaled and will work in any row width. Also, setting a fixed height is very important for the design to work. Child elements (column and modules) will have a height of 100%. Therefore, if you do not set the fixed height of the row, the child elements will not have a height.

Column parameters

Now that the row height is set, open the column settings and add the following CSS code to the main element:
Office

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

Add a divi css code

Tablet

flex-direction: column;

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

Creating the accordion panel with the modules Summary

The accordion slider can be built using any type of module. If we wanted, we could use a combination of different modules to serve as an accordion panel. But for this design, we're going to be using Blurb Mods.

Start by adding a presentation module to the line.

Add a divi summary module

Abstract module design

Open the summary module settings and update the following:

Keep the title fictitious and contents from the body. We can always change this later.

Then update the presentation icon as follows:

  • Icon (desktop): icon representing a horizontal arrow line (see screenshot)
Divi icons configuration
  • Icon (hover): check icon (see screenshot)
Use icons when hovering divi
  • Icon (tablet and phone): icon representing a vertical arrow line (see screenshot)
slider accordion divi responsive

Context

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

  • Add a background image that is at least 1000 pixels wide
  • Position of background image: center left
Abstract divi background configuration

Then add a gradient background overlay.

Float

  • Left gradient background (hover): # 3e215b
  • Background gradient to the right Color (hover): rgba (0,0,0,0)
  • Gradient Direction: 90deg
  • Place the gradient above the background image: YES
slider accordion divi responsive

Icon

  • Icon Color: #ffffff
  • Image / location of icons: left
Modify divi icon module

Then go to the Design tab and update the following:

Title and body of the text

  • Title Font: Poppins
  • Font Title: Semi Bold
  • Text Title Color: transparent (desktop), #ffffff (hover)
  • Text Title Size: 23px
  • Body text color: transparent (desktop), #ffffff (hover)
Divi summary module font configuration

Height and Box Shadow

Once the text is stylish, assign the module a height of 100% and a shadow box as follows:

  • Height: 100%
  • Box Shadow: See screenshot
  • Shadow of the box Horizontal position: -12px
  • Shadow of the box Vertical position: 0px
Modify divi summary module size

Blurb Custom CSS

In order for our accordion panels (or presentation module) to expand and contract with the rest of the modules, we need to add custom CSS to change the size of the module with flex-grow. As we are going to have a total of 5 mods that make up the accordion, we add "flex: 1" for the default state, then we change it to "flex: 5" in the hover state.

Under the Advanced tab, add the following custom CSS, the main Blurb element:

Office

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

Tablet

flex:5;

Divi summary parameter

Then add the following custom css to CSS Blurb Content:

Office

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

Modify the style of the divi text module

Tablet

width: 100%;height: 100%;position: relative !important;

CSS code for summary module content

Overflow and transition

  • Horizontal overflow: hidden
  • Vertical overflow: hidden
  • Duration of the transition: 400ms
  • Transition speed curve: linear
Divi summary module overflow configuration

Well! It was a serious customization of a presentation module. But the good news is, all we have to do is duplicate them to create the remaining accordion panels.

Duplicate the Blurbs for more accordion panels

Hover over the presentation 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

Create a slider with an accordion on divi

Latest Thoughts

This responsive accordion slider really has some unique elements that make it fun to use. Accordion panels expand and contract while hovering without unexpected problems. And presentation icons change while hovering and on mobile to boost UX. Hope this design will be useful for your next project.