Menu icon Foundation
Deep linking on same page: selectTab/(accordion)down errors - responsive accordion tabs

Good day,

I was using a tabbed area on a website with no problem whatsoever. Tabs function perfectly, and with the data-deep-link set to true, the right tab was open on page load if there was a hash in the url.

A problem arose when I wanted to link to the tabs from the same page using anchor tags which did not work by itself, and needed a foundation(selectTab) called explicitly from a click event. It worked well.

I then realized the tabs looked bad on mobiles, or even larger devices if there were too many tabs, to I looked into the responsive accordion tab to turn tabs into accordion at a certain breakpoint. Things broke with the selectTab:

ReferenceError: We're sorry, 'selectTab' is not an available method for e.

Both the accordion and tab plugins support deep linking but selectTab is only supported by Tabs. Accordion has its 'down' method: how to go about replacing one method with another at breakpoint?

As per my tests and trials, if I load the page in a mode that will produce tabs HTML (large), selectTab returns the above error; Same for 'down' if page is loaded on small screen to produce accordion HTML.

Redeclaring foundation() on document on page load (after the DOM was produced) returns an error of redundancy. Should I do some explicit calls to some particular foundation components after the accordion/tab swap was made? Is there a way to make callbacks after the code was swapped?

Thanks!

Foundation v.6.3.1 complete with all components.

deep linkingselectTabdownaccordiontabsresponsive-accordion-tabsinternal anchorsame page deep linking

Good day,

I was using a tabbed area on a website with no problem whatsoever. Tabs function perfectly, and with the data-deep-link set to true, the right tab was open on page load if there was a hash in the url.

A problem arose when I wanted to link to the tabs from the same page using anchor tags which did not work by itself, and needed a foundation(selectTab) called explicitly from a click event. It worked well.

I then realized the tabs looked bad on mobiles, or even larger devices if there were too many tabs, to I looked into the responsive accordion tab to turn tabs into accordion at a certain breakpoint. Things broke with the selectTab:

ReferenceError: We're sorry, 'selectTab' is not an available method for e.

Both the accordion and tab plugins support deep linking but selectTab is only supported by Tabs. Accordion has its 'down' method: how to go about replacing one method with another at breakpoint?

As per my tests and trials, if I load the page in a mode that will produce tabs HTML (large), selectTab returns the above error; Same for 'down' if page is loaded on small screen to produce accordion HTML.

Redeclaring foundation() on document on page load (after the DOM was produced) returns an error of redundancy. Should I do some explicit calls to some particular foundation components after the accordion/tab swap was made? Is there a way to make callbacks after the code was swapped?

Thanks!

Foundation v.6.3.1 complete with all components.

wanda0123456 over 2 years ago

I am a new member. What's in the new, please introduce me.

WasM. over 2 years ago

Is it ok to bump this?

There is really not much literature online dealing with this. Or perhaps am I doing it wrong? I'd be grateful being shown the right direction.

Thanks.