Responsive Tabs is a jQuery plugin that provides responsive tab functionality. The tabs transform to an accordion when it reaches a CSS breakpoint. You can use this plugin as a solution for displaying tabs elegantly on desktop, tablet and mobile.
I want to be able to have a tab and its contents visible in the tab/desktop view, but hidden in the mobile/accordion view. I have tried adding a class="hidden" to the
and
and then setting that class to display:none for tablet & mobile views; however, it is still showing up when I look at it in tablet/mobile view.
Adding a class would not work indeed, because the tab elements for the accordion view are generated, and don't copy classes from the original element. You could solve this by using the activateState callback, or (if you only need to hide it for accordion) just remove the accordion element on load.
You'll have to write a bit of code that selects the accordion titles, maybe based on the r-tabs-accordion-title class. You'll have to come up with the code yourself :).
Because this issue relates to your specific project, I'll close it for now
I want to be able to have a tab and its contents visible in the tab/desktop view, but hidden in the mobile/accordion view. I have tried adding a class="hidden" to the
Any help would be appreciated!
Adding a class would not work indeed, because the tab elements for the accordion view are generated, and don't copy classes from the original element. You could solve this by using the
activateStatecallback, or (if you only need to hide it for accordion) just remove the accordion element on load.I think that removing the accordion element on load would be best. What code would I need to add to make that happen?
You'll have to write a bit of code that selects the accordion titles, maybe based on the
r-tabs-accordion-titleclass. You'll have to come up with the code yourself :).Because this issue relates to your specific project, I'll close it for now