responsive accordion slider

A responsive accordion slider is a fun and engaging way to display content in a small space. Accordion sliders are usually made up 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 expanding and contracting is achieved.

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

responsive accordion slider

Create a slider with a responsive accordion on Divi

Line creation

To start, add a row of one column 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 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 (columns 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 settings

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

Desktop

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

Tablet

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

Creation of the accordion panel with the Summary modules

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 row.

Summary module design

Open the summary module settings and update the following:

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

Then update the overview icon as follows:

  • Icon (desktop): icon representing a horizontal arrow line (see screenshot)
  • Icon (hover): check icon (see screenshot)
  • Icon (tablet and phone): icon representing a vertical arrow line (see screenshot)

context

Then give the blurb a background image and a gradient hover layer like this:

  • Add a background image that is at least 1000 pixels wide
  • Position of the background image: center-left

Then add a gradient background overlay to the hover.

Float

  • Background gradient left (hover): # 3e215b
  • Background gradient right Color (hover): rgba (0,0,0,0)
  • Gradient Direction: 90deg
  • Place the gradient above the background image: YES

Icon

  • Icon Color: #ffffff
  • Image / icon location: left

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)

Height and Box Shadow

Once the text is styled, give 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

Blurb Custom CSS

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;

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

Office

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

Tablet

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

Overflow and transition

  • Horizontal overflow: hidden
  • Vertical overflow: hidden
  • Transition duration: 400ms
  • Transition speed curve: linear

Well! It was 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.

Read more: How to add a snippet using Gutenberg on WordPress

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 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.

 

For website maintenance service contact us.

Leave a comment

echo "";