Foundation 6 accordion deep-linking with smudge offset no longer working correctly?

[rickcurran]

I am implementing some Foundation 6 Accordions which can be opened automatically by the deep-linking functionality and using the data-deep-link-smudge="true attribute to automatically adjust the position of the linked Accordion item. However, it appears that this functionality is not working correctly and I am trying to determine / confirm that this is an issue with Foundation 6 and not just an issue in own code. (Foundation 6 has been around for a while at this point so it's possible that a bug is occurring with modern browsers).

In an attempt to confirm this I have created a basic example to test using the following markup within a page set up with the appropriate Foundation JS and CSS files referenced and set up for deep-linking as per the Foundation 6 docs.

Here is the basic markup I've used for the Accordions:

<ul class="accordion" data-accordion data-deep-link="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" id="deeplinked-accordion">
    <li class="accordion-item is-active" data-accordion-item>
        <a href="#deeplink1" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content id="deeplink1">Panel 1. Lorem Epsom dolor</div>
    </li>
    <li class="accordion-item" data-accordion-item>
        <a href="#deeplink2" class="accordion-title">Accordion 2</a>
        <div class="accordion-content" data-tab-content id="deeplink2">Panel 2. Lorem ipsum dolor</div>
    </li>
</ul>

Here's a link to a test page I have set up, this should open the 6th accordion and scroll to its position on the page:

https://qreate.co.uk/test-accordion.html#deeplink6

Can anyone confirm that this is also not working correctly for them?

[clizlee]

It opened accordion #6 for me just fine. But if your browser window is smaller it scrolls to the top of the accordion, meaning to the top of the ul and not #6. I believe if you want it to scroll to #6 you change data-deep-link-smudge to false or just don't include it.

[rickcurran]

@clizlee On my example it should also scroll down to the 6th accordion even on bigger screens as I've included a lot of placeholder content below the accordions to enable this. But with these settings in place it's not scrolling down at all. The data-deep-link-smudge="true" attribute is intended to automatically offset the position scrolled to with a, there is also an additional data-deep-link-smudge-offset attribute which can be used to specify this offset with a specific amount. You can see more details about these attributes in the Plugin options on the Accordions page in the F6 docs:

https://get.foundation/sites/docs/accordion.html#js-options

So the issue is that these additional attributes don't seem to be working anymore. You are correct though that if I remove these additional data-deep-link-smudge and data-deep-link-smudge-offset attributes then the scroll does work, but it results in the issue that the smudge option is intended to fix which is that it scrolls down to the accordion but the accordion header is not visible and is scrolled. See this additional example without those attributes:

https://qreate.co.uk/test-accordion-b.html#deeplink6

One thing I haven't tried yet is setting these attributes directly with JavaScript rather than these HTML attributes to see if the issue still occurs so I am going to check that next.

[rickcurran]

Following up on my last reply, I have now tested the functionality setting the Accordion behaviour using JavaScript instead of using the HTML attributes method, however this results in the same broken / buggy behaviour. This is the JS being used to init the Accordions:

var options = { deepLink: true, deepLinkSmudge: true, deepLinkSmudgeOffset: 600, allowAllClosed: true };
var elem = new Foundation.Accordion( $( '#deeplinked-accordion' ), options );

Just to check that I haven't somehow mixed in an issue in my own code when building Foundation I have made a fresh build using the Foundation 'Basic Template' starter project but I am seeing the same issue with that too. You can view this test here:

https://qreate.co.uk/test-accordion/index.html#deeplink6

Can anyone else reproduce this behaviour? I'm fairly confident I am not mis-configuring anything so it seems there is a bug.

cc/ @joeworkman