Build an Elementor Horizontal Accordion without extra addons

Introduction

Accordions are a typical UX pattern in web design, helping to present information in a concise and organized manner. By removing clutter, confusion, and cognitive workload, accordions help to maintain the user’s focus and ensure that details of a section are only presented when the user needs them, upon a tap or mouse click.

Elementor has a native accordion widget that only works in the vertical orientation. If you want a plugin that allows horizontal accordions, check out Crocoblock’s JetTab Image Accordion.

In this tutorial, I’ll show you how to apply some custom CSS to customise the native Elementor accordion widget into a Horizontal Accordion (for desktop screen sizes), as shown in this example.

Add an accordion widget to a section/container

Drag the Elementor native Accordion Widget into a new section/container as needed. Then, populate the Accordion Items with all the relevant titles.

Make sure to disable the accordion icon.

Adjust the layout using Custom CSS

Add a CSS class name to the accordion widget

Edit the Accordion Widget under Advanced > Layout > CSS Classes, and give it a class name of dd-accordion--h.

For Elementor Pro users, you can ignore this step. Simply replace “dd-accordion--h“ with “selector” in the CSS Snippet provided in the subsequent sections.

Horizontally stack the accordion items

The default stacking orientation for Elementor’s Accordion items is vertical. We would need to apply some custom CSS to change it to horizontal.

One way to do this is by utilising the CSS flexbox layout. The default flex-direction is a row, which we want in this case. So we would not need to explicitly define it.

Add this custom CSS:

/* accordion wrapper */
.dd-accordion--h .elementor-accordion {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

Set a minimum height for the accordion

I’d recommend defining a minimum height for the accordion and its content to create a consistent look.

Add this custom CSS:

.dd-accordion--h :where(.elementor-accordion, .elementor-tab-content) {
    /* min-height: 24em; */
    min-block-size: 24em;
}

I prefer working with logical properties (min-block-size) rather than explicitly saying min-height to cater for people with different writing directions.

Horizontally stack the accordion title and content

The next step is that we need to horizontally stack the title and content of the accordion. We can achieve this by also utilising the flexbox layout. Add this custom CSS:

.dd-accord--horizontal .elementor-accordion-item {
    display: flex;
}

Change the layout and writing mode of the accordion item titles

In order to minimise the space occupied by the accordion title to provide more room for the content, we need to set a minimum width for the titles. This can easily be achieved in two (2) parts.

• Set the padding to 0. Edit the accordion under Style > Title > Padding
• Set the writing mode to the vertical orientation and adjust the width as required using the custom CSS below.
• Use the flexbox layout to easily align the title to the centre.

.dd-accordion--h .elementor-tab-title {
-webkit-writing-mode: vertical-lr;
writing-mode: vertical-lr;

/*min-width: 40px;*/
min-block-size: 2.5em;

display: -webkit-box;
display: -ms-flexbox;
display: flex;

align-items: center;
justify-content: center;

}

Style the accordion titles

Optionally, suppose you’d like to add different colours to each accordion title. In that case, you could easily use the Custom CSS to target the nth-of-type for each accordion item with the custom CSS below as a guide:

/*-- Accordion Title Colors --*/

.dd-accordion--h
    .elementor-accordion-item:nth-of-type(1)
    .elementor-tab-title {
    background-color: #D5BFB4;
}
.dd-accordion--h
    .elementor-accordion-item:nth-of-type(2)
    .elementor-tab-title {
    background-color: #C48A6E;
}
.dd-accordion--h
    .elementor-accordion-item:nth-of-type(3)
    .elementor-tab-title {
    background-color: #E5CFA8;
}
.dd-accordion--h
    .elementor-accordion-item:nth-of-type(4)
    .elementor-tab-title {
    background-color: #E3B769;
}

.dd-accordion--h
    .elementor-accordion-item:nth-of-type(5)
    .elementor-tab-title {
    background-color: #B88D5C;
}

Add the Media Queries

The final step is to enclose the entire code in a media query so that the tweak to the accordion widget is only displayed for desktop screens

The general way to add media queries is as follows:

@media screen and (min-width:768px){
 // your code goes here
}

Summarised CSS

Here is a condensed version of the CSS to copy and use on your project. Remember to add a class name of “dd-accordion--h” to your accordion widget.

@media screen and (min-width: 768px) {
    .dd-accordion--h{
        --min-height: 24em;
        --content-padding: 1em;
        --min-title-width: 2.5em;
    }
    .dd-accordion--h :where(.elementor-accordion, .elementor-accordion-item, .elementor-tab-title) {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }
    .dd-accordion--h .elementor-accordion {
        /*min-height: var(--min-height);*/
        min-block-size: var(--min-height);
    }

    /* accordion title */
    .dd-accordion--h .elementor-tab-title {
            /*-webkit-transform: rotate(180deg);
                     transform: rotate(180deg);*/
        -webkit-writing-mode: vertical-lr;
        writing-mode: vertical-lr;

        /*min-width: var(--min-title-width);*/
        min-block-size: var(--min-title-width);

        -webkit-box-align: center;
         align-items: center;
        justify-content: center;
    }

    /*-- Allow the other non-active accordion items to close quickly --*/
    .dd-accordion--h
        .elementor-accordion-item
        .elementor-tab-title:not(.elementor-active)
        + .elementor-tab-content {
        display: none !important;
    }
    /* Disable Content Animation */
    .dd-accordion--h .elementor-tab-content{
    min-height: var(--min-height);
    padding-block: var(--content-padding) !important;
}
}

/*-- Accordion Title Colors --*/
.dd-accordion--h .elementor-accordion-item:nth-of-type(1) .elementor-tab-title {
    background-color: #D5BFB4;
}
.dd-accordion--h .elementor-accordion-item:nth-of-type(2) .elementor-tab-title {
    background-color: #C48A6E;
}
.dd-accordion--h .elementor-accordion-item:nth-of-type(3) .elementor-tab-title {
    background-color: #E5CFA8;
}
.dd-accordion--h .elementor-accordion-item:nth-of-type(4) .elementor-tab-title {
    background-color: #E3B769;
}
.dd-accordion--h .elementor-accordion-item:nth-of-type(5) .elementor-tab-title {
    background-color: #B88D5C;
}