Elementor Hotspot Click Opens Corresponding Accordion

Elementor Hotspot Click Opens Corresponding Accordion

Check out our CSS Course, made especially 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

13 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!

  2. Hello, great code!
    Question: where would we add an anchor link to the code?
    So, if a person clicks the hotspot, the screen scrolls to the open tab.

    1. Hey Lyle!

      try changing this part of the code:

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

      with

      hs.forEach((e,i,arr) => {
      e.addEventListener('click', function(){
      $(titles[i]).click();
      $(mobileTitles[i]).click();
      $('html, body').animate({
          scrollTop: $(titles[i].parentElement.parentElement).offset().top - 90,
      }, 'slow');
      });
      });
      

      Cheers!

  3. Hello, is it possible to make hotspot hidden by default? Now it's always open even if you set the accordion to be closed when load page

    1. Also there is an issue when you click on hotspot while popup is active it close accordion tab but not hide the hotspot popup, same when you click on accordion tab to close it, the tab closes but hotspot popup stays visible

      1. Hey Kamil!

        Sorry this isn't meant to work with the popups... it's rather meant to 'replace' the popups, with the information now being in the accordion.

        Cheers!

  4. ohh i see, thank you for your reply
    I've got one more question if i may.
    Why hotspot don't change the active color when i click on it? It only changes when i click on accordion

    1. Greetings!

      Delete this part of the code:

      $('html, body').animate({
      scrollTop: $(titles[i].parentElement.parentElement).offset().top - 90,
      }, 'slow');

      Cheers!

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.