Vertical Tabs in Front End (Drupal 7)

Question

I am trying to use Vertical Tabs on the front end of my site.

Normally, I would just add a jQuery plug-in to my theme. However, vertical tabs are built into Drupal 7, so it seems silly to use a plugin, when the functionality already exists.

I'm just not sure how to call the built-in vertical tabs.

Dan Silver's blog has an excellent tutorial on how to call the built-in tabs. However, his tutorial is for horizontal tabs. I am not sure how to convert them to vertical ones.

I would appreciate if anyone could give me some hints.

(P.S. I am aware that modules exist to do this. However, for my purposes it seems overkill to use a module when I can achieve it with a few simple lines of theming).

Answer 1

The examples module will provide you some custom code to implement this, have a look at the API documentation which add a vertical tab to the node form.

The only restriction I can think of is that this code is for forms so if you want to theme a node output you should use jQUery UI tabs. The tutorial you linked seems fine, but you'll need to change a little its CSS classes in order to output vertical tabs, compare its code tho this demo.