-
Posts
-
Hi!
I have made a page with an image with hotspots and below it an accordion with multiple toggles. I have linked the hotspots to the toggles so when I press the “1” from the image with hotspots, the screen scrolls to the toggle one of the accordion (I made a link “#toggle-id-1” to the element and every other toggle there is).
This works great when there’s no toggle open BUT….
When one of the toggles are open (for example toggle number 1), and I press any of the links BELOW / AFTER the number in question (in this case toggle 1), the screen scrolls lower than it should. I believe this is because the toggle’s anchor/place doesn’t change even though the previous toggle in the accordion is opened ( and there’s suddenly more length in the page than there is when every toggle is closed.)
1) So, is there a possibility of making every toggle close when someone clicks the link to any of the toggles (as in a command closing every toggle and then executing the link to open just one)
2) OR is there a way to close every toggle when user scrolls above a certain point in the page?
3) OR is there a way of making the scrolling function understand that a toggle is open so it would scroll to a right place?
4) OR do you have any other ideas how I could achieve my goal?
Hey Cloaker,
Thank you for your patience and the link to your site, I was able to put together a script that will trigger a click on the active toggle when the special heading Kulttuuriturkulaisten esittelyt is scrolled past on the way up to the hotspot image.
It was written this way so the scroll down to the anchors would not trigger the fake click and so the fake click would also be triggered when the bottom of the hotspot image was in view for the lower links.
Try adding this code to the end of your functions.php file in Appearance ▸ Editor:function custom_script() { ?> <script> (function($){ var $things = $('.av-special-heading-tag'); $things.waypoint(function(direction) { if (direction === 'up') { $('.toggler.activeTitle').trigger('click'); } }, { offset: '50%' }); })(jQuery); </script> <?php } add_action('wp_footer', 'custom_script');I would recommend adding a custom ID to the special heading and using it in place of the class .av-special-heading-tag in the script so that this is not triggered on other pages.
Best regards,
MikeHi,
I’v tried putting a custom ID to the heading and to the script, but it’s still not working. Wondering what’s wrong :S
- You must be logged in to reply to this topic.