How to Create a Responsive Accordion Slider in Divi

Posted on October 4, 2019 by in Divi Resources | 17 comments

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

divi responsive accordion slider

Tablet and Phone

divi responsive accordion slider

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 Divi Daily email list 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.

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.

divi responsive accordion slider

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%;

divi responsive accordion slider

Tablet

flex-direction: column;

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.

divi responsive accordion slider

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)

divi responsive accordion slider

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

divi responsive accordion slider

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

divi responsive accordion slider

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

divi responsive accordion slider

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

divi responsive accordion slider

Icon

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

divi responsive accordion slider

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)

divi responsive accordion slider

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

divi responsive accordion slider

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;

divi responsive accordion slider

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

Desktop

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

divi responsive accordion slider

Tablet

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

divi responsive accordion slider

Overflow and Transition

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

divi responsive accordion slider

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.

divi responsive accordion slider

Final Result

Desktop

divi responsive accordion slider

Tablet and Phone

divi responsive accordion slider

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!

Premade Layouts

Check Out These Related Posts

17 Comments

  1. How crazy creative and clever.

  2. Great !
    Thanks for sharing.

  3. This accordion slider is fun to use. It can make a website looks more attractive. Thank you, Jason.

  4. Hello,
    Really great !
    You and Donjete, you offer us many
    really useful tutorial.
    This allows us to make sites with great effects.
    thank you

  5. Hello Jason,
    I liked the article. It’s clean and clearly understandable.
    Always a fan of this website!
    Thank you.
    But there is a problem, can you please what will happen if i use ‘position: auto !important;’ instead of ‘position: relative !important;’?
    Thank you in advance!

    • Hi Jason.. Thanks for this absolute gem it’s exactly what have been looking for…

      But it only seems to work in desktop mode, it doesn’t expand for both mobile screen and tablet..
      I follow the instructions exactly
      Please what else can I do ?

  6. Hello,
    I learned a lot from this tutorial again . Thank you.
    One little information is missing for me, how can I set for example the middle blurb initial state to expanded?
    If I change the middle blurb main css to flex:5, then it will start expanded,
    but it doesn’t contract if the mouse is over other blurb.

    • Szabolcs,

      Good question. My first thought is that it probably will not possible without some jQuery since you will have to change the middle blurb CSS (flex:5 to flex:1) when hovering over another blurb.

  7. Thank You For This Article!
    It is very enjoyable & Useful

  8. Column Settings. I can’t choose “desktop” or “tablet” for column settings : /

    • Hmm… What seems to be the problem exactly? Are you not able to hover over a option group and click the little tablet icon to deploy the responsive tabs?

      Also, make sure that you are actually in column settings by clicking the gear icon on the column element under row settings.

      Hope that helps.

  9. Hi Jason.. Thanks for this absolute gem it’s exactly what have been looking for…

    But it seems to only work in desktop mode, it doesn’t expand for both mobile screen and tablet..

    Please how do I fix this?

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest