Elementor Hotspot Click Opens Corresponding Accordion

Elementor Hotspot Click Opens Corresponding Accordion

Table of Contents

Here is how to create a Elementor hotspot that on click will open the appropriate corresponding accordion. Also works the other way about: clicking the Elementor accordion title will trigger the right hotspot.

It also works for the Elementor tab element.

See it in action here:

Visit the demo directly.

The Elementor Hotspot Accordion Code

Ber certain to watch the video above to understand how it all works!

<script>

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

let parSections = document.querySelectorAll('.hs-acc-design');

parSections.forEach(parSection => {

let hs = parSection.querySelectorAll('.e-hotspot__button');
let titles = parSection.querySelectorAll('.elementor-tab-title:not(.elementor-tab-mobile-title)');
let mobileTitles = parSection.querySelectorAll('.elementor-tab-mobile-title');
hs[0].parentElement.classList.add('e-hotspot--active');

hs.forEach((e,i,arr) => {
e.addEventListener('click', function(){
$(titles[i]).click();
$(mobileTitles[i]).click();
});
});

titles.forEach((e,i,arr) => {
manageTabs(e,i,arr)
});
mobileTitles.forEach((e,i,arr) => {
manageTabs(e,i,arr)
});

function manageTabs(e,i,arr){
e.addEventListener('click', function(){
hs.forEach((e,j) => {if (j !== i) { e.parentElement.classList.remove('e-hotspot--active') } });
if (mobileTitles.length < 1) {
hs[i].parentElement.classList.toggle('e-hotspot--active')
} else {
hs[i].parentElement.classList.add('e-hotspot--active')
};
});
}

});
});
});
</script>
<style>
.e-hotspot--active.e-hotspot:not(.e-hotspot--circle) .e-hotspot__button{
background-color: #BE0000; /* Color of circle when active */
}

.e-hotspot--active .e-hotspot__icon{
color: #fff; /* Color of icon when active */
}

.e-hotspot--active .e-hotspot__button svg{
fill: #fff; /* Color of icon when active */
}

.e-hotspot__icon svg, .e-hotspot__label svg {
height: 18px; /* size of the icon, keep below 30px ** only relevant if you have the inline svg icon experiment active ** */
}
</style>

Hope you enjoy!

Let me know what you think of this design and if it worked well for you! Cheers!

Looking for something else? Search across 2445 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

2 Responses

  1. Hi there!
    I've been trying to use the code but when I try to use the accordion it doesn't leave the tab open, it only works if I click on the hotspot, do you know why could it be? thanks!

Leave a Reply