WordPress.org

Ready to get started?Download WordPress

Forums

WP UI - Tabs, Accordions, Sliders
[resolved] My link to an accordion doesn't open it. (19 posts)

  1. richard.miller
    Member
    Posted 1 year ago #

    I have a "Classic Motorcycles" link on one page...

    http://ratchetsaway.com/purpose-built/classes/advanced-maintenance-course/

    ... which points to the bottom accordion on a second page:

    http://ratchetsaway.com/purpose-built/classes/#classic_motorcycles

    I followed the guidelines on this (very detailed and helpful!) page, but the link fails to open that bottom "Classic Motorcycles" accordion.

    I tried enabling the "load CDN jQuery" and "load needed components on demand" in the advanced section, but no dice.

    Help?

    http://wordpress.org/extend/plugins/wp-ui/

  2. kavingray
    Member
    Plugin Author

    Posted 1 year ago #

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

  3. richard.miller
    Member
    Posted 1 year ago #

    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.

  4. kavingray
    Member
    Plugin Author

    Posted 1 year ago #

    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. :(

  5. richard.miller
    Member
    Posted 1 year ago #

    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.

  6. richard.miller
    Member
    Posted 1 year ago #

    ... and it still doesn't work with all plugins deactivated.

  7. richard.miller
    Member
    Posted 1 year ago #

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

    Thanks for your help.

  8. msuth
    Member
    Posted 1 year ago #

    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?

  9. richard.miller
    Member
    Posted 1 year ago #

  10. msuth
    Member
    Posted 1 year ago #

    @richard.miller Thanks! Wish me luck lol

  11. daretoeatapeach
    Member
    Posted 1 year ago #

    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 http://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 http://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?

  12. motorhobo
    Member
    Posted 11 months ago #

    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

  13. kavingray
    Member
    Plugin Author

    Posted 11 months ago #

    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 .

  14. motorhobo
    Member
    Posted 11 months ago #

    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:

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

    http://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.

  15. uzmas
    Member
    Posted 11 months ago #

    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

  16. motorhobo
    Member
    Posted 11 months ago #

    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:

    http://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

  17. motorhobo
    Member
    Posted 11 months ago #

    Further to this -- the spoiler link on my site works properly, i.e. from the browser's URL bar the link goes to the page and opens the spoiler...further indication that the problem is the regex in the accordion routine.

    Thanks,
    Van aka motorhobo

  18. silverporl
    Member
    Posted 9 months ago #

    motorhobo's explanation sounds what is happening to me as well, please let us know what is happening regarding this possible bug, thank you.

  19. geodgeod
    Member
    Posted 5 months ago #

    @Kavin - is there a solution to this please. I've tried your tutorial and they aren't working as of now. Please let us know - appreciate it.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic