Menu icon Foundation
Opening Accordion Panel with Link

Hi, how do I open an accordion panel by using an external anchor link?

I've tried using an anchor link and it just loads the page, without opening the panel.

What I'm trying to achieve is that when the anchor link is clicked, the page loads, scroll to the panel and then open it.

accordionanchoropen accordionjavascriptFoundation 5feature request

Hi, how do I open an accordion panel by using an external anchor link?

I've tried using an anchor link and it just loads the page, without opening the panel.

What I'm trying to achieve is that when the anchor link is clicked, the page loads, scroll to the panel and then open it.

Rafi Benkual almost 6 years ago

This will require some custom JavaScript. Anyone done this before?

Ben Goodman almost 6 years ago

I think this should be build in.

it goes without saying that there is content within accordions that your users would need to access, sometimes, just that information and not the other information.

Rafi Benkual almost 6 years ago

Can you post an example or your code?

Are you trying to load a new page or keep everything on the same page?

BTW same question http://foundation.zurb.com/forum/posts/1591-accordion-open-from-external-link

Arthur de la Rocha almost 6 years ago

Hey Ben,

I want to try and get some clarity on what you are trying to achieve so bare with me. Did you mean you have a anchor tag on Page 1, then it links to Page 2, and you want it to scroll down when Page 2 loads and open the Accordian?

Ben Goodman almost 6 years ago

Hi, Arthur de la Rocha,

That is correct, page one to page two, then scroll to and open the related accordion section.

Mark Segunda almost 6 years ago

Kind of vague interaction...
Would require custom JS.

Can't you split the interaction? Use Joyride to do the moving stuff if you have to. (All whilst giving the user feedback as to why where scrolling around).
My 2c....

Rafi Benkual almost 6 years ago

You can try
$('#myaccordion').foundation('accordion', 'open', 'http://some-url');

Ben Goodman almost 6 years ago

Hi Rafi, I don't see how that will help.

Basically we have a page of links like http://www.hello.com/thispage#thistag

How do I use that link to open the accordion section relating to the #.

Rafi Benkual almost 6 years ago

Hey Ben,
This is not a Foundation related issue but we're happy to help.

There was an answer on the jquery forum that might do it https://forum.jquery.com/topic/accordion-open-a-specific-tab-with-link-from-another-page

Ben Goodman almost 6 years ago

Ok, this is all far too much, just for deeplinking.

I think it should definitely be integrated into foundation, I believe it was previously.

I'll just use a plugin to do accordions instead.