Last updated May 7, 2013. Created by Dave Reid on December 8, 2009.
Edited by mugginsoft.net, hansrossel, bleen18, greggles. Log in to edit this page.

Placeholder for the vertical tabs handbook page.

http://drupal.org/project/vertical_tabs

Controlling which fieldsets and forms are vertical tabified

You can customize it from the interface:
On admin/settings/vertical-tabs check "Expose vertical tabs selection on the edit content type forms" and then go to the settings of each content type where you have now an option for vertical tabs to select "Include the following elements in the vertical tabs" with checkboxes to enable or disable each tab.

You can customize which forms and/or fieldsets are tabified or not from your site's settings.php file. The following are some examples on how to control the vertical tabs module:

<?php
// Enable vertical tabs on a form.
$conf['vertical_tabs_forms']['my_form_id'] = TRUE;
// Disable vertical tabs on a form.
$conf['vertical_tabs_forms']['page_node_form'] = FALSE;
// Enable vertical tabs but be selective of which fieldsets are included. By default all fieldsets are tabified. To exclude certain fieldsets, use an array with the fieldset ids associated with FALSE values.
$conf['vertical_tabs_forms']['page_node_form'] = array('menu' => FALSE);
?>

If you prefer to change these settings from within your module (in mymodule_init() or mymodule_form_alter() for example), the following works as well:

<?php
$vtabs
= variable_get('vertical_tabs_forms', array());
// Enable vertical tabs on a form.
$vtabs['my_form_id'] = TRUE;
// Disable vertical tabs on a form.
$vtabs['page_node_form'] = FALSE;
// Enable vertical tabs but be selective of which fieldsets are included.
$vtabs['page_node_form'] = array('menu' => FALSE);
variable_set('vertical_tabs_forms', $vtabs);
?>

You can also use the Form module which will give you a 'Configure this form' link at the tops of all forms on your site. Click on that link and it will give you options for which fieldsets to include.

Note that the Form module is still experimental and shouldn't be constantly enabled on production sites. Enable it once, set your vertical tabs configuration, then disable the Form module. The configurations will persist even when the Form module is disabled.

Adding vertical tabs to your own module's form

To enable vertical tab support

<?php
function mymodule_settings_form() {
 
$form['mymodule_setting1'] = array(
   
'#type' => 'checkbox',
   
'#title' => t('Setting 1'),
   
'#default_value' => variable_get('mymodule_setting1', 0),
   
// Technically this should be the same value for all tabs in a set of vertical tabs, but any value that equals TRUE means that it should be included in the vertical tab set.
   
'#group' => 'mymodule',
  );
  ...
 
// Add vertical tabs display if available.
 
$form['#pre_render'][] = 'vertical_tabs_form_pre_render';
  return
$form;
}
?>

Adding verticaltab summary JavaScript to your module's fieldsets

In the following example we are going to add a fieldset to all node edit forms and add a summary.

In the file mymodule.module:

<?php
/**
* Implements hook_form_alter().
*/
function mymodule_form_alter(&$form, $form_state, $form_id) {
 
// Only include on node add/edit forms.
 
if (strpos($form_id, '_node_form') !== FALSE) {
   
$form['myfieldset'] = array(
     
'#type' => 'fieldset',
     
'#title' => t('My module node options'),
     
'#group' => 'additional_settings',
     
// This is D7-style attached properties that will only work if vertical tabs is installed.
     
'#attached' => array(
       
'js' => array(
         
'vertical-tabs' => drupal_get_path('module', 'mymodule') . '/mymodule.js',
        ),
      ),
    );
   
$form['myfieldset']['mymodule_option1'] = array(
     
'#type' => 'checkbox',
     
'#title' => t('Enable crazy option 1'),
     
'#default_value' => isset($form['#node']->mymodule_option1) ? $form['#node']->mymodule_option1 : 0,
    );
    ...
  }
}
?>

In the file mymodule.js:

// The following line will prevent a JavaScript error if this file is included and vertical tabs are disabled.
Drupal.verticalTabs = Drupal.verticalTabs || {};
// Note the name here matches the name of the fieldset ID.
Drupal.verticalTabs.myfieldset = function() {
  if ($('#edit-mymodule-option1').size()) {
    if ($('#edit-mymodule-option1').attr('checked')) {
      return Drupal.t('Option 1 enabled');
    }
    else {
      return Drupal.t('Option 1 disabled');
    }
  }
  else {
    return '';
  }
}

Excluding your module's fieldset by default from vertical tabs

If you want to disable vertical tabs you can set #group => FALSE on the fieldset element in your form array.

If your module does not specify a #group value, it will respect the setting at Administer > Site configuration > Vertical tabs about whether to be included by default.

This is the current Drupal 7 core preference. Note that if the user has set specific fieldsets to be included/excluded by using the Form module those will always override the defaults set in the code.

Identifying the tabs

By default vertical tabs render something like:

<li class="vertical-tab-button">
   <a href="#group_data_feed" class="vertical-tabs-list-group_data_feed vertical-tabs-nosummary">
      <strong>Vehicle Data Feed</strong>
   </a>
</li>

The lack of an identifier makes it hard to, for instance, hide a particular tab or style it. Vertical tabs are rendered in the browser on page load. theme_vertical_tabs is used to inject the required JavaScript into the page. By overidding theme_vertical_tabs it is possible to inject a modified copy of vertical_tabs.js from a helper module.

/*
* theme_vertical_tabs
*/
function seven_road_vertical_tabs($element) {
  static $added = FALSE;
  if (!$added) {
    // use custom vertical tabs js
    drupal_add_js(drupal_get_path('module', 'roadside_vm') . '/vertical_tabs.js');
    drupal_add_css(drupal_get_path('module', 'vertical_tabs') . '/vertical_tabs.css');
    $added = TRUE;
  }
  vertical_tabs_process_attached($element);
  return '<div class="'. $element['#attributes']['class'] .'">&nbsp;</div>';
}

The custom vertical_tabs.js is modified to provide a tab ID:

Drupal.verticalTabs = Drupal.verticalTabs || {};
Drupal.settings.verticalTabs = Drupal.settings.verticalTabs || {};
Drupal.behaviors.verticalTabs = function() {
  if (!$('.vertical-tabs-list').size() && Drupal.settings.verticalTabs) {
    var ul = $('<ul class="vertical-tabs-list"></ul>');
    var panes = $('<div class="vertical-tabs-panes"></div>');
    $.each(Drupal.settings.verticalTabs, function(k, v) {
      var summary = '', cssClass = 'vertical-tabs-list-' + k, cssID = 'vertical-tab-button-' + k;
      if (v.callback && Drupal.verticalTabs[v.callback]) {
        summary = '<span class="summary">'+ Drupal.verticalTabs[v.callback].apply(this, v.args) +'</span>';
      }
      else {
        cssClass += ' vertical-tabs-nosummary';
      }
      // Add a list item to the vertical tabs list.
      $('<li id="' + cssID + '" class="vertical-tab-button"><a href="#' + k + '" class="' + cssClass + '"><strong>'+ v.name + '</strong>' + summary +'</a></li>').appendTo(ul)
        .find('a')
        .bind('click', function() {
          $(this).parent().addClass('selected').siblings().removeClass('selected');
          $('.vertical-tabs-' + k).show().siblings('.vertical-tabs-pane').hide();
          return false;
      });
     // continue the original JS

The outcome of which is:

<li id="vertical-tab-button-group_data_feed" class="vertical-tab-button">
   <a href="#group_data_feed" class="vertical-tabs-list-group_data_feed vertical-tabs-nosummary">
      <strong>Vehicle Data Feed</strong>
   </a>
</li>

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.

Comments

In D7, disabling vertical tabs doesn't work. Here is a discussion on this topic: http://drupal.org/node/1048644

--
Need help? http://klimek.ws/drupal

I have unsuccessfully attempted disabling the vertical tabs using the above settings.php and module approaches. :(

It appears these methods are not valid for Drupal 7.

On admin/settings/vertical-tabs check "Expose vertical tabs selection on the edit content type forms" and then go to the settings of each content type where you have now an option for vertical tabs to select "Include the following elements in the vertical tabs" with checkboxes to enable or disable each tab.

vertical tabs only exists for drupal6
drupal 7 has its own version of vertical tabs
which probably you can control with
http://drupal.org/project/rel and http://drupal.org/project/field_group

I'm new to drupal and vertical tabs is proving one of those 'breaking points' where I'm inclined to pack the whole thing in and suffer with a stupid Wordpress site instead.

I have installed the microblog module and have the form in a block on the sidebar.

I now want to activate the Book module, but when I do that what I now know as a "vertical tab" appears in the block, and it appears impossible to switch off.

I tried to make sense of the above and downloaded notepad++ to attempt my first edit of my settings php file. After eventually finding that, the term "vertical" does not seem to appear in the file. So I have to paste this new code into the php file? It seems a bit heavy handed for what should be such a simple feature to switch on and off.

It seems this was easier to manage in Drupal 6. With Drupal 7 it seems something has been added without adequate, accessible means for novice users for managing those new 'features'.

The other standard solution it seems is to instal yet more modules to solve this, which in this case seem to be Renderable Elements https://drupal.org/project/rel and Field Group https://drupal.org/project/field_group. This will likely mean yet more bloat to my instal, and more learning curve with many more hours invested in overcoming the simplest step. I'm all for learning, but in Dupal it seems to be hours and hours for the simplest tweak.

Drupal has many great things, but there is still the sense that building websites like this should remain the province of professional developers - keeping them employed and everyone else excluded. Supposedly the whole Drupal idea is to make this accessible, but I am not always sure this is really borne out.