Simple & Easy Help
for WordPress Beginners

Elementor – Style the tabs, accordion, and toggle widgets

Get the Latest from Sniffle Valve

Sniffle Valve logo

If you find this tutorial to be helpful and of use, consider buying Sniffle Valve a coffee  

For help with the content presented in this tutorial, book a one-on-one online training session

The tabs, accordion, and toggle widgets in Elementor can be styled from within Elementor, but those styles apply to all the respective items in each widget. 

There may be times when you would like to apply certain styles to the individual items, including perhaps, a background image.  That is what this tutorial shows you how to do using relatively simple CSS.

For each of the three widgets, all I did in Elementor was add an additional item and additional text in the second and third items.

It should be noted that if and when you add additional items, you will have to add an additional block of CSS for that widget type and increment the [data-tab] or [data-section] value accordingly.

The rest is done with CSS. I use the Simple CSS plugin and recommend that you do as well.

Color names are used instead of the hexadecimal values as it is easier for those who are not accustomed to them to be able to see what’s going on. The W3Schools HTML Color Names page is a good resource for those wanting to find out more on the subject.

Tabs Widget

/* Elementor Tabs Widget*/
#my-tabs1 [data-tab="1"] {
    background-color: lightblue;
}

#my-tabs1 [data-tab="2"] {
    background-color: lightgreen;
}

#my-tabs1 [data-tab="3"] {
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: 18px;
    
}

@media (min-width: 768px) {
	#my-tabs1 [data-tab="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
Elementor Tabs Widget CSS

Accordion Widget

/* Elementor Accordion Widget*/
#my-accordion [data-section="1"]{
	color: white;
    background-color: cadetblue;
}

#my-accordion [data-section="2"]{
	color: white;
    background-color: seagreen;
    
}

#my-accordion [data-section="3"]{
	color: white;
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
}

@media (min-width: 768px) {
	#my-accordion [data-section="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
Elementor Accordion Widget

Toggle Widget

/* Elementor Toggle Widget*/
#my-toggle [data-tab="1"] {
    color: white;
    background-color: steelblue;
}

#my-toggle [data-tab="2"] {
    color: white;
    background-color: goldenrod;
}

#my-toggle [data-tab="3"] {
    background: url("FULL_URL_OF_IMAGE") no-repeat fixed center;
    background-size: cover;
    color: white;
    text-shadow: 2px 2px 4px #000000;
    font-size: 18px;
    
}

@media (min-width: 768px) {
	#my-toggle [data-tab="3"] {
    	webkit-column-count: 3; /* Chrome, Safari, Opera */
    	-moz-column-count: 3; /* Firefox */
    	column-count: 3;
	}
}
Elementor Toggle Widget

3 thoughts on “Elementor – Style the tabs, accordion, and toggle widgets

  1. Thanks for this video!
    I am looking for a way to only give the title tabs a background colour so it does not effect the whole background like in your video. Can this be done too, and if os, how please?

  2. It’s ok, found the solution by adding this css:

    .elementor-12 .elementor-element.elementor-element-b5c2fi3 .elementor-tab-title.active {
    background-color: #e3e0e0;
    }

    .elementor-12 .elementor-element.elementor-element-b5c2fi3 .elementor-tab-title {
    background-color: #f7f7f7;
    }

Leave a Comment