For websites that have a large amount of information, it makes sense to use jQuery tabs and accordions to organize that information into smaller chunks of text. It makes even more sense to use anchor links so that you can easily refer to specific tabs or accordion panels.
When using accordions and tabs in WordPress, it makes sense to use a plugin. But what plugin should you choose?
What’s the best WordPress jQuery UI plugin?
There really isn’t a “best” jQuery UI plugin. WP UI is a really easy plugin to use and includes shortcodes, but as hard as I tried, I could not get anchor links to behave the way I wanted with accordions. Sure, I got the “anchor” to work, but something—either with the native jQuery UI behavior or something with the plugin—would show halfway down the selected accordion panel. I added various jQuery code snippets to try to move the screen up further so that you would see the accordion header, but to no avail.
The second plugin I used was jQuery UI Widgets. While this plugin may be harder to use for non-coders, this was the answer to my accordion-anchor link problems!
Anchor Linking Accordions with Scrolling Behavior
One of the issues I had with WP UI was that when you clicked on a link to an accordion panel, it would (with some help) open the panel but would scroll to the middle of the panel or to the bottom of the page, cutting off the top of the accordion.
With some experimenting and research, here is the code you need to use with jQuery UI Widgets if you want to anchor link your accordions:
<script type="text/javascript">
jQuery(function() {
jQuery( ".accordion" ).accordion({heightStyle: "content"});
var anchor = window.location.href.split('#')[1];
if (anchor != '') {
jQuery('.accordion').find('h3#'+anchor).trigger('click');
}
jQuery('a').click(function(){
if(jQuery(this).attr('href').charAt( 0 ) == '#') {
var anchorNew = jQuery(this).attr('href');
jQuery('.accordion').find('h3'+anchorNew).trigger('click');
}
});
jQuery( ".accordion" ).accordion({
activate: function(event, ui){
var scrollTimer = (Math.abs((jQuery('body').scrollTop()-ui.newPanel.offset().top-45)/100));
jQuery('html, body').animate({
scrollTop: ui.newPanel.offset().top-80
}, scrollTimer*200);
}
});
});
</script>
The first section of the code gets the current hash and triggers the click for the appropriate accordion panel. Since my client’s webpage had anchor links to other panels within certain accordion panels, I coded in another function. This time, if the user clicks on a link, it checks whether it starts with a hash tag (so it would lead to an anchor link on the current page) and if it does, it performs the click trigger for the new anchor link.
The second section of the code is thanks to Trevor on this Stack Overflow Q&A. It finds the newly selected accordion panel, and scrolls smoothly to just above the accordion’s heading. Your users will be able to read the accordion’s heading and the top of the accordion just fine with these script snippets.
