Elementor Accordion, Toggle and Tabs Element Awesome Column Background Image Switcher

No extra plug-ins required! Elementor Free compatible!

Asked frequently in the group, how to change the column background image upon selecting an Elementor accordion, Elementor toggle or Elementor tabs title.

Working examples:

With the Accordion Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

With the Toggle Element

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

With the Tabs Element

Video tutorial below!

Elementor Accordion, Toggle and Tabs Element Awesome Column Background Image Switcher
Play Video

To begin with, create your toggle, accordion, or tabs element in a two column section

It can also be an inner section. 

Important: Add a background image in the other column.

Elementor Accordion, Toggle and Tabs Element Awesome Column Background Image Switcher

Then, give your accordion, toggle or tabs element the appropriate class name

Here are the needed class names for each elements:

Accordion: ‘ accordionswitcher ‘

Toggle: ‘ toggleswitcher ‘

Tabs: ‘ tabswitcher ‘

Elementor Accordion, Toggle and Tabs Element Awesome Column Background Image Switcher

Now, add an HTML element on the same page

It doesn’t really matter where on the page the HTML Element is added…

Elementor Close PopUp on Click for Menu & Same Page Links
left element

Add the right code to the html element, and edit the links to your own background images

Important: the first background image link will be automatically linked with the first accordion, toggle or tabs item, and so on. Add a link for every item.

Code for accordion element:

<script>

'use strict';
document.addEventListener('DOMContentLoaded', function () {

//Edit the background images links HERE

var links = [
'//cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestick.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestickys.jpg'
];


/* Don't modify the code below */

var switchers = document.querySelectorAll('.accordionswitcher .elementor-tab-title');
var Column = document.querySelector('.accordionswitcher').closest('.elementor-column');
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();

// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue('background-position');
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue('background-repeat');
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue('background-size');

// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement('beforeend', createElement(link));
})


var _loope = function _loope(i) {
switchers[i].addEventListener('click', function () {
rColumn.style.backgroundImage = "none";
resetBackground();
var element = document.querySelectorAll('.accordionswitcher-background')[i];
element.classList.add('active');

});
}
function resetBackground() {
var blocks = document.querySelectorAll('.accordionswitcher-background');
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove('active');
}
}
function createElement(link, className) {
var obj = document.createElement('div');
obj.className = "accordionswitcher-background " + className;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = 'url(' + link + ')';
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});

</script>


<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s cubic-bezier(.25,.98,.73,.73);
}

.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>

Code for toggle element:

<script>
'use strict';

document.addEventListener('DOMContentLoaded', function () {

//Edit the background images links HERE

var links = [
'//cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestick.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestickys.jpg'
];


var switchers = document.querySelectorAll('.toggleswitcher .elementor-tab-title');
var Column = document.querySelector('.toggleswitcher').closest('.elementor-column');
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();

// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue('background-position');
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue('background-repeat');
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue('background-size');

// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement('beforeend', createElement(link));
})

var _loope = function _loope(i) {
switchers[i].addEventListener('click', function () {
rColumn.style.backgroundImage = "none";
resetBackground();
var element = document.querySelectorAll('.toggleswitcher-background')[i];
element.classList.add('active');

});
}
function resetBackground() {
var blocks = document.querySelectorAll('.toggleswitcher-background');
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove('active');
}
}
function createElement(link, className) {
var obj = document.createElement('div');
obj.className = "toggleswitcher-background " + className;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = 'url(' + link + ')';
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});

</script>
<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s cubic-bezier(.25,.98,.73,.73);
}

.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>

Code for tabs element:

Important: for the tab element, you need two sets of the same links to the background images, for this  to also work on mobile… so if you have 3 tabs, you need six links, in this way: link_1_url, link_2_url, link_3_url, link_1_url, link_2_url, link_3_url .

<script>
'use strict';

document.addEventListener('DOMContentLoaded', function () {

//Edit the background images links HERE

var links = [
'//cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestick.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'//cdn.element.how/wp-content/uploads/2019/08/phonestick.png'
];


var switchers = document.querySelectorAll('.tabswitcher .elementor-tab-title');
var Column = document.querySelector('.tabswitcher').closest('.elementor-column');
var rColumn;
function getRColumn(){
if(Column.nextElementSibling){
rColumn = Column.nextElementSibling.firstElementChild;
}
else if(Column.previousElementSibling){
rColumn = Column.previousElementSibling.firstElementChild;
}
};
getRColumn();

// get parent element background styles
var backgroundPosition = window.getComputedStyle(rColumn, null).getPropertyValue('background-position');
var backgroundRepeat = window.getComputedStyle(rColumn, null).getPropertyValue('background-repeat');
var backgroundSize = window.getComputedStyle(rColumn, null).getPropertyValue('background-size');

// add block with background
links.map(function(link, index) {
rColumn.insertAdjacentElement('beforeend', createElement(link));
})

var _loope = function _loope(i) {
switchers[i].addEventListener('click', function () {
rColumn.style.backgroundImage = "none";
resetBackground();
var element = document.querySelectorAll('.tabswitcher-background')[i];
element.classList.add('active');
});
}
function resetBackground() {
var blocks = document.querySelectorAll('.tabswitcher-background');
for (i = 0; i < blocks.length; i++){
blocks[i].classList.remove('active');
}
}
function createElement(link, className) {
var obj = document.createElement('div');
obj.className = "tabswitcher-background " + className;
obj.style.backgroundSize = backgroundSize;
obj.style.backgroundPosition = backgroundPosition;
obj.style.backgroundRepeat = backgroundRepeat;
obj.style.backgroundImage = 'url(' + link + ')';
return obj;
}
for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});

</script>
<style>
.accordionswitcher-background, .toggleswitcher-background, .tabswitcher-background{
position: absolute;
left: 0;
top: 0;
bottom: 0;
right: 0;
opacity: 0;
transition: opacity 0.4s cubic-bezier(.25,.98,.73,.73);
}

.accordionswitcher-background.active, .toggleswitcher-background.active, .tabswitcher-background.active{
opacity: 1;
}
</style>

Finally, enjoy this awesome design!

Et voila! Thanks for reading!
Let me know if you need help!

27 Responses

  1. Tried with Toggle version, doesnt work.

    Tried dual column and Inner section, Html added with script, Class allocated to Toggle widget, background image applied - Am I required to give the column with background image a class

    1. Maxime Desrosiers Very nice tutorial, thanks! Just one issue, in elementor, the accoordion has the first tab active standard, but the image is not showing automatically. You have to open en close the tab for the image to appear. Could you help me with this pelase? check at http://www.orbiz.be

    2. Remco Dumortier Simply place an image as a background in the other column! Same one as you get by clicking the first accordion title!

  2. Very nice tutorial, thanks! Just one issue, in elementor, the accoordion has the first tab active standard, but the image is not showing automtically. You have to open en close the tab for the image to appear. Could you help me with this pelase?

  3. Is there a way that I could have multiple accordions - like think nested and use this methodology? Could that code be tweaked to allow that?

    1. Maxime Desrosiers I did. Unfortunately it did not work for me out of the box and I’m trying to figure out if I can tweak and what I would need to tweak

  4. Great tutorial, I've used it with the tabs. One problem is that the default bg in the second column is not overwritten with the new image and is always visible behind the new one.
    So the new image is showing but is stacked on top of the default background. I'm trying to show different products which have a transparent background.
    Is there a way to work around this? (Without losing the transparant bg of the image)
    Thank you in advance!

    1. Hello Kadyshev! Not certain exactly what you are asking here... do you mean how to change the background of some other column, when clicking an icon box element ?

  5. Hi Maxime Desrosiers,
    I have tried with the accordion. However, on mobile, I am unable to adjust the image height in the column containing the image. Please see https://taxa.dk/bestil-taxa-4/ in mobile view.

    I have tried adjusting the column margin/padding as well as the section margin/padding with no luck.

  6. Hello,
    Great tutorial. I was wondering if you could target a dynamic image element by Jetengine or similar method to house the image within it.

    1. Yes it's probably possible... However I'd need to know more clearly what's needed to give a better answer as to how to make this.

    1. Hi !
      Hope you're fine.
      I just tried (and re-tried) your awesome tutorial but it doesn't work. is it still working with Elementor v3.2.0 ? Thanks 🙂

  7. To get it on hover instead of click, change :

    switchers[i].addEventListener('click', function () {

    to

    switchers[i].addEventListener('mouseenter', function () {

  8. Hi, I tried to create multiple Toggle elements in different rows, hoping to apply same effect to all of them. However it does not works the way I want.

    What I did was rename the classes to toggleswitcher1, toggleswitcher2, toggleswitcher3, toggleswitcher4 (including within the code). Then I put in multiple HTML element in the page.

    Please advise if possible...

Leave a Reply