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
Awesome
Polyvalent
Designs
Awesome
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Polyvalent
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Designs
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Elementor Accordion, Toggle and Tabs Background Image Switcher Template
This download gets you the following template :
Elementor Accordion, Toggle and Tabs Background Image Switcher Template
Related tutorial : Elementor Accordion, Toggle and Tabs Background Image Switcher
Video tutorial below!
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.
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 = [
'https://cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonestick.png',
'https://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 = [
'https://cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonestick.png',
'https://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 = [
'https://cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonestick.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonesticky.png',
'https://cdn.element.how/wp-content/uploads/2019/08/phonestickys.png',
'https://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>
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
It should be working, no class is needed for the column. do you have a link to the page where you tried to create this?
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
Maxime Desrosiers also i see that you have put an element in your second column, so not only the background picture
Remco Dumortier Simply place an image as a background in the other column! Same one as you get by clicking the first accordion title!
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?
Simply place an image as a background in the other column! Same one as you get by clicking the first accordion title!
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?
Yes, it could be modified to allow this! in fact, you could try it as it is... it might work right away!
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
Stacey Bertrand You can message me via Messenger if would like further help with this!
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!
Helo Bram! I updated the code, it should now work exactly as you want!
Hi. How do you make an icon box widget, too? https://docs.elementor.com/article/89-icon-box
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 ?
Yes.Icon box element.
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.
Add a 'spacer' element in that column, and adjust it's size to what you need!
Maxime Desrosiers Awesome! Thank you...
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.
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.
Can i change the photos with text block?
Not with this design... I have done custom work for clients that allows this, but I don't have a tutorial for this...
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 🙂
Bonjour Max! You can get my download at the top of the page and import it on your website. Let me know if that works! And yes, this is working with 3.2, that is what my templates site has : https://templates.element.how/elementor-accordion-toggle.../
To get it on hover instead of click, change :
switchers[i].addEventListener('click', function () {
to
switchers[i].addEventListener('mouseenter', function () {
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...
Hi Max, can you write code for two sections, like top section/inner section has image and bottom section has tab. like this https://1drv.ms/u/s!Ak7VJEF7_u3UlwaMn2diYI_FaiqE?e=WulOMt
Hey Dinesh!
Yep I can write the code for that.
great, I appreciate your quick reply.
Hi, thank you for posting this tutorial. The code does not work for me for any of the three options. Can anyone confirm they are having the same problem?
I've followed the tutorial exactly:
- Created two columns
- Insert accordion, rename CSS Classes to 'accordionswitcher' (tried for other two as-well)
- Uploaded background image to the second column
- Insert HTML anywhere on the page and copy/paste code into it. Links from the example do not change
Am I missing something?
Could you share your page with me? I will have a look what might be the problem.
I was having the same issue and then i figured out it was because i was forgetting the comma after every link in the code! i hope this was the case for you.
Hey Maxime, thank you for an amazing tutorial, I was hoping you could point me in the right direction. I want to put 4 separate accordions on the same page, currently the first one is the only one working, I've had a play with the script but it's not my forte 🙂
Thank you so much.
Hey Lauren!
Indeed these aren't written for more than 1 per page... I'd need to rewrite them to allow for this. I'm a bit busy though at the moment. I don't know when I will be able to update the code. You can write me at maxime@element.how if you need to for a project soon!
Hey Maxime, two of us have tried the code and cannot get it to work. Any help is much appreciated. http://sheric20.sg-host.com
Hey
How could I make those images vertically centered with accordion? Columns are vertically middle but pictures are with absolute position.
Hey Tauri!
Change this part of the CSS code:
left: 0;
top: 0;
bottom: 0;
right: 0;
To something like:
left:0;
top:50%;
transform:translateY(-50%);
and delete
bottom: 0;
right: 0;
Cheers!
Hi, thanks for this great tutorial! Is it possible to get the background images from a custom field?
More context: I'm building a site for somebody who is not comfortable with code. I'd love to be able to add some custom fields to the page via ACF, and have them upload their accordion images there. Then, I'd like to pull those in to your code, instead of asking them to copy/paste the urls. Is this possible?
Hey Emer!
Yes this is possible, however it would require some code modifications, and depending on your exact requirements, the method used might differ. This falls rather under custom work though, you can reach out to me if you want!
Does the code still work with the new flexbox containers ?
Hey Victor!
No it won't work as it is for flexbox containers. I will update the tutorial when the containers will officially be ready.
hi, i am facing an issue in TABs when i am adding links more than 6 it's not working kindly help me out