Project's name
SuzanneCare.com
Year
2011
Project type
Website

 

Your (company) name.
Write down 10 ideas or thoughts what comes into your mind related to your future project.
Image CAPTCHA
Enter the characters shown in the image.
Vertical tabs in Drupal 7 (a simple example of how they work)

The bla bla part

 

After struggling a couple of hours to display the my vertical tabs, and searching on the internet for a description, I've found what was my mistake. This article's intention is to save time for those developers who has just encountered with this problem and wants to find a quick solution.

 

Sollution


Basically after examining the code example from the example module, I've found that the vertical_tabs are the container of the different fieldsets, and the title of the fieldset is the vertical tab's title.

All tabs are connected to the vertical_tabs through the  #group attribute. It's that simple...

 



  1.       $form['additional_settings'] = array(
  2.          '#type' => 'vertical_tabs',
  3.          '#weight' => 99,
  4.       );
  5.  
  6.       $form['vertical_tabs_example2'] = array(
  7.       '#type' => 'fieldset',
  8.       '#title' => t('Example vertical tab2'),
  9.       '#collapsible' => TRUE,
  10.       '#collapsed' => FALSE,
  11.       // The #group value must match the name of the vertical tabs element.
  12.       // In most cases, this is 'additional_settings'.
  13.       '#group' => 'additional_settings',
  14.       // Attach the javascript for vertical tabs.
  15.       '#attached' => array(
  16.         'js' => array(
  17.           'vertical-tabs' => drupal_get_path('module', 'vertical_tabs_example') . '/vertical_tabs_example.js',
  18.         ),
  19.       ),
  20.       '#tree' => TRUE,
  21.       '#weight' => -2,
  22.     );
  23.    
  24.       $form['vertical_tabs_example'] = array(
  25.       '#type' => 'fieldset',
  26.       '#title' => t('Example vertical tab1'),
  27.       '#collapsible' => TRUE,
  28.       '#collapsed' => FALSE,
  29.       // The #group value must match the name of the vertical tabs element.
  30.       // In most cases, this is 'additional_settings'.
  31.       '#group' => 'additional_settings',
  32.       // Attach the javascript for vertical tabs.
  33.       '#attached' => array(
  34.         'js' => array(
  35.           'vertical-tabs' => drupal_get_path('module', 'vertical_tabs_example') . '/vertical_tabs_example.js',
  36.         ),
  37.       ),
  38.       '#tree' => TRUE,
  39.       '#weight' => -2,
  40.     );