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
With the Toggle Element
With the Tabs Element
Video tutorial below!
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.
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 '
Now, add an HTML element on the same page
It doesn't really matter where on the page the HTML Element is added...
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>
