responsive tabs (tab to accordion on small screen width) I have a task of building a responsive website with custom theme and all that good stuff. One thing I stumbled across is using tabs to display data.

Tabs are a requirement in the site but they are not responsive. I have seen some wordpress sites that have this nice feature of turning tabs into accordion when the screen width is small.

Unfortunately I could not find a way to implement that in Drupal so far. The only way that I thought of is loading to view blocks (1 tabs and 1 accordion) and show/hide one of the two based on screen width using JS but this solution is not an efficient one.

Please let me know if there is a way in which I can accomplish this task.
Short way : download Easy Responsive Tabs to Accordion Jquery plugin, add it to your theme and call the easyResponsiveTabs function for your HTML tabs markup.

Drupal Solution with Panels : use Panels responsive tabs to accordion, a sandbox project which provides a Responsive Tabs to Accordion Panel style. 


Install Panels module.
Install the sandbox project. This was a quick done project (no time to develop the admin options) so you may have to modify a few lines in responsive_tabs.inc to set up the paths to css or js files and/or HTML markup in responsive_tabstoaccordion_panels.js.
Go to  your region Panel style and choose the new style Responsive Tabs to Accordion