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

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.

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 = [
'https://elementorcodes.com/wp-content/uploads/2019/08/phonesticky.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestickys.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestick.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestickys.jpg'
];


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();

var _loope = function _loope(i) {
switchers[i].addEventListener('click', function () {
rColumn.style.backgroundImage = 'url(' + links[i] + ')';
});
}

for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});
</script>

Code for toggle element:

<script>
'use strict';

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

//Edit the background images links HERE

var links = [
'https://elementorcodes.com/wp-content/uploads/2019/08/phonesticky.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestickys.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestick.png',
'https://elementorcodes.com/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();

var _loope = function _loope(i) {
switchers[i].addEventListener('click', function () {
rColumn.style.backgroundImage = 'url(' + links[i] + ')';
});
}

for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});
</script>

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 = [
'https://elementorcodes.com/wp-content/uploads/2019/08/phonesticky.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestickys.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestick.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonesticky.png',
'https://elementorcodes.com/wp-content/uploads/2019/08/phonestickys.png',
'https://elementorcodes.com/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();

var _loope = function _loope(i) {
switchers[i].addEventListener('click', function () {
rColumn.style.backgroundImage = 'url(' + links[i] + ')';
});
}

for (var i = 0; i < switchers.length; i++) {
_loope(i);
}
});
</script>

Finally, also add this code at the very beginning of your html element

This is to prevent the image showing up slowly as it loads. It will preload the images in the browser of the user. The transition will then be smooth and clean!

Important: replace the links with the URL  to your images that are 'yet to show up', after clicking a title. Add a 'div' like this for every image to be shown.

<div style='background-image:url(https://elementorcodes.com/wp-content/uploads/2019/08/phonesticky.png);' ></div>
<div style='background-image:url(https://elementorcodes.com/wp-content/uploads/2019/08/phonestickys.png);' ></div>
<div style='background-image:url(https://elementorcodes.com/wp-content/uploads/2019/08/phonestick.png);' ></div>

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

< News >

Get awesome new designs right in your inbox!

No spam, not more than one weekly email.

< Elements Finder>

Quickly search across all the main Elementor Addons.

< Recent Designs >

Visit the Learning Center For More Designs !

Created by <Elementor Codes>