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:
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!
25 Responses
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!
I don't quite understand what you mean here.... would you have the URL?
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.
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!
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
hotspot popup*
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
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!
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
Greetings Kamil,
I'm not certain. As you see from my demo above, everything works as it should.
Cheers!
Hi, your code is absolutely divine, it just doesn't work on my mobile. Don't know what it could be?
https://onlinedzungle.cz/mapa-online-dzungle/
Greetings!
Delete this part of the code:
$('html, body').animate({
scrollTop: $(titles[i].parentElement.parentElement).offset().top - 90,
}, 'slow');
Cheers!
ok, I made a different image for mobile hotspots and it didn't work that way. 😀 Now it works 😀
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
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!
Hello Maxime,
Great code and works. BTW, wanna ask, is this code works the same way with carousel? Thank you
Greetings!
Unfortunately it doesn't...
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 !
Awesome, thanks for sharing Emmanuel!
Hi,
Does this code also work with the new containers, or only with sections?
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!
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 🙂
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!
Alright Paul, awesome thanks for confirming this is working as it should!
The tutorial has now been updated to work with both the new and old accordion elements, seamlessly.