Elementor Hotspot Click Opens Corresponding Accordion
Get Premium

Elementor Hotspot Click Opens Corresponding Accordion

Element.How also offers premium tutorials! Check them here:

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:

Copy Template
Download Template

Please log in to access this template. It's free! Login here

 

Visit the demo directly.

The Elementor Hotspot Accordion Code

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

The code has been updated in early 2024 to work with the new accordion element, as well as the old one.

<script> 
/* Please login to get the code 
 * The code will be for the Elementor Hotspot Click Opens Corresponding Accordion tutorial 
 * Found at this URL https://element.how/elementor-hotspot-click-opens-accordion/ 
 */ 
</script>

Hope you enjoy!

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

Elementor Hotspot Click Opens Corresponding Accordion

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

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

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

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

      1. Hello Could you please to change from Accordian widget to open Tabs widget?

  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

    2. 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!

  6. hello , Grate code!
    i have a one question if i use this code mobile view it will working perfectly . but i am create 2 sections one for desktop another one for mobile . i am use same code for both section and use same class name for both . but its only work on desktop . it's not supported on mobile .kindly let me know how to solve it

    1. Hey Deepan!

      I suggest you try to keep it simple and don't duplicate your sections on desktop and mobile. Most of the time, this is possible if you are careful about the way you build them!

      Using containers instead of sections should help with this as well and make it even easier to have just one design and no duplicates.

      Cheers!

  8. Hello,
    the code was not working because i did not have the class .elementor-tab-title in my DOM. So I replaced it with .e-n-accordion-item-title in the HTML and now it's working! Fantastic script and tutorial. thank you !

    1. Hey Paul!

      Yes it works with the containers. You just need to be certain that you have a wrapper container with class 'hs-acc-design' that is a common ancestor of both the accordion and hs elements.

      Cheers!

      1. Thanks for the reply Maxime! I noticed that, while it does work with containers, it doesn't seem to work with the new improved accordion widget. I think some class names need to be updated in the code. I'm going to experiment tomorrow and let you know if I figure it out, though you will probably figure it out faster than me 🙂

      2. It seems Emmanuel, who commented above, already found the fix for the new accordion widget. Updating the class names to .e-n-accordion-item-title (even for mobile titles) is the fix for the new accordion widget. Either way this is great stuff, love your tutorials Maxime!

      3. Alright Paul, awesome thanks for confirming this is working as it should!

    1. Hey Vasilis!

      It could but it would require some modifications... with the new accordion element though, you can have any content you wish in there, so hopefully that should work well for most cases.

      I just added the possibility to download the template.

  11. Hi,
    Great code, thanks.
    BTW, I want to change the background color of lable, when I select it from the hotspot. Not when I select the element from the Accordion.
    which part of the code shall i change?
    thanks in advnce

    1. Greetings!

      Try this CSS:

      .elementor-widget-n-accordion .e-n-accordion-item.e-n-accordion-item[open] .e-n-accordion-item-title {
    background-color: #333;
    color: #fff;
}

.elementor-widget-n-accordion .e-n-accordion-item.e-n-accordion-item[open] .e-n-accordion-item-title-icon span>i {
    color: #fff;
}

      Cheers!

    1. Sorry ignore that. It looks fine, then when i navigate to another page then come back one of the hotspots shift. Please can you contact me? Im happy to pay for a fix.

Leave a Reply