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.

  • Hi redamakarem, can I have your feedback ? did you try the solutions purposed ?
    – Kojo
    May 14, 2014 at 8:24
  • hey sorry for the late reply but nope the proposed solutions didnt work :( May 15, 2014 at 9:26

1 Answer 1


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.

  1. Install Panels module.
  2. 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.
  3. Go to your region Panel style and choose the new style Responsive Tabs to Accordion

tabs display accordion display

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.