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.

See the demo here.

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');
hs[0].parentElement.classList.add('e-hotspot--active');

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

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

});
});
});
</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!

premium full screen navigation

fullscreen
View Demos
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