nico3333fr
Responsive / Mobile?
This sounds like a great accessible-friendly plugin (https://a11y.nicolas-hoffmann.net/tabs/) b/c I noticed this is responsive.
However, when I downloaded this off from Github and tested it out, it isn't mobile - does not change to accordion (like this https://a11y.nicolas-hoffmann.net/tabs/)?
What am I missing? Does it required extra plugin?
Hi, yes, I have a responsive question as well, but I think I have a solution. Everything in the plugin works great except one thing. I have been trying to turn the jump to anchor id back on and can't figure it out. It would be great if this was a setting that could be enabled or disabled like the fragments. Here's why. I set this tab box up with vertical tabs on the left and the tab content box on the right. That works great on a monitor. On a mobile device, the tab content box wraps down below the tabs so if you have many tabs, you click one and it updates the tab content box below but doesn't scroll to it. The user thinks nothing happened. If the tab could jump to the id anchor for the tab content then it takes the user where they need to go for the content. However, the script deactivates scrolling to the id anchor. I've tried to reverse engineer it to see if I could get it back on. Is this possible somehow? Thanks in advance.
@llahnoraa in fact, in the demo, I've updated the CSS in order to display tabs adapted to mobile, however, this is not perfect. I will update the demo asap.
@Budmaniak : yes, there is an option to disable fragment, you might add data-tabs-disable-fragment="1", see on the page "Other bonuses: “disabled” tab management, and disabled fragments" https://a11y.nicolas-hoffmann.net/tabs/#disabled-feature ;)
@llahnoraa @Budmaniak : for the responsive, a better option is to update tabs to expands. I'm preparing a demo to explain it, but I hadn't enough free time to do it.
Here is the trick: You use the tabs script, and in each tab content, you use hide/show. On desktop version, you hide the hide/show buttons and always display hide/show contents, and on mobile version, you hide tab buttons and show expands normally.
You may see an example here: https://directory.esomar.org/ (see "Codes & Guidelines" tabs at the bottom).
Do you understand how to do it? If not, I will add an example asap.
Thank you @nico3333fr. I see how it's done in the example. That would be great if I could get this script to become accordion style like that on phone size browsers. Unfortunately for me, the tab content divs wrap below all the tabs and each tab still just shows the content below all tabs. Is there more scripting I need to add to the jquery-accessible-tabs.js file to enable accordions on the media query, or is this already built in and I need to call it somehow. This is really good work. I am excited to get this fully functioning. Thank you for your time to respond to this.