My link to an accordion doesn't open it.

Hi Richard,
Please make sure the URL fragment (Hash ) is correct. Sometimes it is appended with numbers – as in #classic_motorcycles_2 or something.

Thanks, Kavingray,

I double-checked that, and it’s correct (see screen capture)

The link actually does pop down the page to the accordion section, but doesn’t open the specifically targeted accordion.

Most likely another plugin/theme using HashChange functionality and returning false – In which case our linking wont work. It’s hard to diagnose that without looking at the code. ??

Which code would you need to see?

The only plugins I’m running are “EasyRotator for WordPress” and “Really simple Facebook Twitter share buttons” and a database backup.

Theme is a child of Twenty Twelve.

… and it still doesn’t work with all plugins deactivated.

Never mind. I discovered another issue (clipped text within the accordion), and decided to utilize a different plugin.

Thanks for your help.

Hi Richard,

I’ve been trying to open specific accordion rows from the same tutorial but CAN NOT get it to work. (Although I also notice that on the tutorial if you type in #ipsum etc to open them in the address bar there are often errors)

What did you use instead?

@msuth I used Collapse-o-matic.

https://plugins.twinpictures.de/plugins/collapse-o-matic/

@richard.miller Thanks! Wish me luck lol

I to have followed the detailed (and helpful!) instructions at the OP’s link, and my accordion links still aren’t opening appropriately.

For example, using “inspect element” I’m told that to have the link go to the third collapse in my accordion I should link to https://karmabennett.com/web-marketing-seo-social-media-marketing-editing-publicity/#collapse3
but it always takes me to the first accordion fold ( #collapse1 ). If you go to the link above, it will go to #collapse1 even though it says #collapse3

I’ve also tried using the section name as link-to. So in the above the link would be https://karmabennett.com/web-marketing-seo-social-media-marketing-editing-publicity/#publicity but all roads lead to #collapse1.

It does this for all sections of the accordion. What to do?

With all due respect to Kevan and his hard work in developing this plugin, despite numerous reports on this issue, his own example accordion on his demo page here doesn’t even appear to work in FF, Chrome or IE and he seems unmotivated to acknowledge this.

So your best bet is to check out other accordion plug-ins. I made the mistake of committing to this plugin assuming the issue would be addressed in the next release. No cigar — still doesn’t appear to work in 0.8.8 and now the site is live, so I’m kind of screwed.

Kevan, if you’re still monitoring this, can you please explain why the example accordion link does not open the Lipsum content if you click the sample link while a different accordion tab is open? Isn’t that what it’s supposed to do? The Tabs and Spoiler examples work fine but the Accordion example does not work at all.

Thanks…Van

Van, My sincere apologies. This was due to the changes with the UI accordion API as the method activate has been deprecated in the latest UI code. But I’ve modified the hashchange code to reflect this.

Please download the latest code from GitHub. https://github.com/kavingray/wp-ui/archive/master.zip .

Kevan — thank you so much for your quick reply. I installed the latest version above and updated the JQuery code to 1.10 on my dev test WP site. However, your demo site still doesn’t work, which makes it impossible for me to debug my own site since I have no functional basis to compare. For example, these links:

https://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#dolor

https://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#lorem

should open the appropriate accordion and jump to that position. This just does not work in FF, Chrome or IE. Nor does it work on my dev install of my Bones-based WP site, even after installing the new WP-UI version referenced and upgrading the theme’s stock JQuery UI code to 1.10.2.

Bottom line is that unless I can see a working example somewhere, I have to conclude that the plugin is broken, hasn’t worked for months, and I’m going to have to continue to make excuses to my clients until I can find time to either debug and fix it myself or use and recommend a different plugin.

If you could just fix the demo so I can see a working example, I think many users would greatly appreciate that. Again, many thanks for your hard work on this otherwise fantastic and useful plugin.

BTW the upgrade apparently doesn’t recognize mods I made to WP UI’s CSS files, so I will have to stick with the existing 0.8.5 version on my live site until the accordion linking problem is fixed.

Am interested in this as well. As motorhobo said, your demo links for everything but the accordion work.

Is there a different way of implementing this or are we missing something.

Thanks

Kevan, please correct me if I’m wrong, but the problem seems to be simply that the accordion code unlike the other examples on your demo page doesn’t retrieve the value from the regex routine that converts the id to lowercase and changes spaces to underscores. This is the div element from the Tables tab of the Tabs demo:

<div id=”tables” class=”ui-tabs-panel ui-widget-content ui-corner-bottom” aria-labelledby=”ui-id-3″ role=”tabpanel” style=”display: block;” aria-expanded=”true” aria-hidden=”false”>

This is the h3 element from the Lorem tab of the Accordion demo:

<h3 id=”Lorem” class=”wp-tab-title ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons” role=”tab” aria-controls=”ui-accordion-1-panel-0″ aria-selected=”true” tabindex=”0″>

Clearly, the id=”Lorem” value should be id=”lorem”, which is why the link fails. As you can see, the link to the Lorem tab is lowercase, as it should be:

https://kav.in/projects/blog/linking-to-tabs-accordions-and-spoilers-in-wp-ui/#lorem

I can confirm that, on my site, the id of the linked-to element is generated with uppercase chars and spaces:

<h3 id=”Charles Dickerson” class=”wp-tab-title ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons” role=”tab” aria-controls=”ui-accordion-1-panel-14″ aria-selected=”false” tabindex=”-1″>

Kevan, this should be an easy fix since you know this code inside and out. Could you please, pretty please, address this and repost to GitHub? I think many people would really appreciate it and return to this plugin from the alternatives they’ve been forced to use just because this essential functionality doesn’t work, apparently due to what’s may be simply a typo in the code.

Again, many thanks for this plugin which most would agree is a huge achievement aside for this one issue.

Van aka motorhobo