Plugin Author
malihu
(@malihu)
Hi,
The problem is that the accordions don’t have an id attribute (neither in their wrapper, title or content), so you can’t scroll to it.
You’ll have to manually enter a target element with an id (e.g. via ‘Page scroll to id’ shortcode) within each accordion item content.
For example, within each accordion content, add a ‘Page scroll to id’ target with an id attribute value equal to the link’s URL (same as the accordions data-anchor).
Thanks for the reply, ended up switching to Magee Shortcodes and that’s what I ended up doing. Wish the actual accordion had an ID so I could have it auto opened. Was hoping to use a script you provided me awhile back but no luck. Looks like I’ll have to wait until the plugin authors adds support for it.
Code for reference
<script>
(function($){
$(window).load(function(){
$(document).data("mPS2id").onComplete=function(){
//get the clicked link
var elem=$(".mPS2id-clicked"),
//get the id value of the clicked link (without the hash)
val=elem.attr("href").split("#")[1];
//check if the id value exists as an accordion element and set/change the URL hash accordingly
if($("#"+val).length && $("#"+val).parents(".accordion-toggle.collapsed").length){
//set the value as location hash in the address bar
location.hash="#"+val;
}
}
});
})(jQuery);
</script>
Plugin Author
malihu
(@malihu)
Since you changed the shortcodes, you have to add something like the following script in order to toggle the accordion items from the left menu links
(function($){
$(window).load(function(){
$("#menu-general-faq .menu-item a[href*='#']").click(function(e){
var $this=$(this),href=$this.attr("href"),
target=$(href),elem=target.parent().next(".panel").find(".collapsed");
if(target.length && elem.length){
elem.trigger("click");
}
});
});
})(jQuery);
Hello,
Thank you, script works great. There’s a slight issue I’ve noticed and that’s if you select an item below the one you’re currently on, it scrolls a bit too far down, selecting it again fixes it though. You’ve already gone above and beyond with helping me so if you’d like to take a look then awesome, if not then that’s OK as well. 🙂
Again thank you for all the help you’ve provided.
Plugin Author
malihu
(@malihu)
This happens because of the accordion animations. The page starts to scroll before animations are completed. Those animations change page length as they show/hide content blocks, thus initial scrolling position is not correct.
Try triggering an extra scrollTo method with some delay within the click function. This will re-adjust scroll-to position after accordion animations are finished (which are roughly 350 milliseconds). For instance:
setTimeout(function(){
$.mPageScroll2id("scrollTo",href);
}, 350);
So the solution is to change the last function I posted above to:
(function($){
$(window).load(function(){
$("#menu-general-faq .menu-item a[href*='#']").click(function(e){
var $this=$(this),href=$this.attr("href"),
target=$(href),elem=target.parent().next(".panel").find(".collapsed");
if(target.length && elem.length){
elem.trigger("click");
setTimeout(function(){
$.mPageScroll2id("scrollTo",href);
}, 350);
}
});
});
})(jQuery);
This should be all you need 😉
Thank you very much!
That did the trick and now it works perfectly.
