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:

// 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:

$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

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:

/**
 * 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>