Drupal 7 vertical tabs like the ones in Drupal 8

Question

Is there a way to move vertical tabs in node forms to a right side column like in Drupal 8? I know one option is Renderable Elements module but last commit was 1 year ago and it says it is an expiremental module.

EDIT: I want to transform vertical tabs into accordions (like the ones in Drupal 8) because once the vertical tabs are in the right column they look awful.

EDIT 2: I just found an interesting sandbox project that does what I want: Responsive Vertical Tabs. However, it's not stable and breaks my ckeditor fields.

Thank you!

Answer 1

You can use a combination of the Node form columns module and the Renderable elements modules.

Node Form cols separates the node forms into two columns and a footer.

This module alleviates some of the problems with the mile-long node forms in Drupal. Other than that it gives you the possibility to use different weights and collapsed states for your forms than for your presentation.

Renderable elements is more complicated to use but lets you split out the parts of the vertical tabs part of the node edit form. For example, after enabling these two modules, do the following for the article content type:

1. Visit node/add/article to add a new article content type
2. Click the new link at the top of the form which says "Manage Form Display"
3. Tick all the items you want to break out of the vertical tabs. As an example choose "Publishing options", "Published", "Promoted to front page" and "Stick at top of lists"
4. Click save
5. Goto Structure -> Content types -> Article -> Manage form
6. Set the "Publishing options (Field group)" and "Save" to be in the right region and press save. nb. I had to use the drop downs here, it didn't seem to rememebr my region choices if I used drag and drop.
7. Visit node/add/article and see the collapsing publishing options block on the right.

Answer 2

To transform vertical tabs into accordions, you could download Easy Responsive Tabs to Accordion, a JQuery plugin which supports vertical tabs. Add this lightweight script to your theme and call the easyResponsiveTabs() function on your HTML tabs markup.

If you use it out of the box, it will gracefully switch from tabs to accordion according to the screen width. In order to display only accordions, just edit the width breakpoint of the script and set it to a high value.

If you use Panels, have a look at Panels responsive tabs to accordion, a sandbox project which provides a Responsive Tabs to Accordion Panel style.

Answer 3

Thanks for all your answers. However, I found two better solutions myself which are responsive:

1) (Best option) I've written my own module to responsify vertical tabs on admin pages: Vertical Tabs Responsive

2) "Responsive Vertical Tabs" could be useful if you don't use "Fieldsets" and "Horizontal tab groups" in your forms. More information in my issue on drupal.org.