Elementor Hotspot Click Opens Corresponding Accordion

Elementor Hotspot Click Opens Corresponding Accordion

Just launched! Checkout the CSS Course for Elementor users.

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!

Element.how also provides premium tutorials showing awesome advanced designs, check them out here.

Looking for something else? Search across 2445 Elements right 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

BRAND NEW

CSS Course For Elementor Users

Become a CSS ninja and design exciting, quality websites that stand out in the crowd.