Render tabs as vertical tree How do I render $tabs used in page.tpl.php, not horizontally, but as a vertical tree so the secondary tabs will be placed under/in the parent?

This is what I got:

&lt;h2 class="element-invisible"&gt;Primary tabs&lt;/h2&gt;
&lt;ul class="tabs primary"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Item 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h2 class="element-invisible"&gt;Secondary tabs&lt;/h2&gt;
&lt;ul class="tabs secondary"&gt;
    &lt;li class="active"&gt;&lt;a href="#"&gt;Child item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a href="#"&gt;Child item 2&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;


This is how I want it to be:

&lt;h2 class="element-invisible"&gt;Primary tabs&lt;/h2&gt;
&lt;ul class="tabs primary"&gt;
    &lt;li&gt;&lt;a href="#"&gt;Item 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;
        &lt;a href="#"&gt;Item 2&lt;/a&gt;
        &lt;h2 class="element-invisible"&gt;Secondary tabs&lt;/h2&gt;
        &lt;ul class="tabs secondary"&gt;
            &lt;li class="active"&gt;&lt;a href="#"&gt;Child item 1&lt;/a&gt;&lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Child item 2&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
    &lt;/li&gt;
&lt;/ul&gt;


How do I achieve this without using javascript? I'm currently using render($tabs); to get something similar to the output above.
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...

$form['additional_settings'] = array(
         '#type' =&gt; 'vertical_tabs',
         '#weight' =&gt; 99,
      );

      $form['vertical_tabs_example2'] = array(
      '#type' =&gt; 'fieldset',
      '#title' =&gt; t('Example vertical tab2'),
      '#collapsible' =&gt; TRUE,
      '#collapsed' =&gt; FALSE,
      // The #group value must match the name of the vertical tabs element.
      // In most cases, this is 'additional_settings'.
      '#group' =&gt; 'additional_settings',
      // Attach the javascript for vertical tabs.
      '#attached' =&gt; array(
        'js' =&gt; array(
          'vertical-tabs' =&gt; drupal_get_path('module', 'vertical_tabs_example') . '/vertical_tabs_example.js',
        ),
      ),
      '#tree' =&gt; TRUE,
      '#weight' =&gt; -2,
    );

      $form['vertical_tabs_example'] = array(
      '#type' =&gt; 'fieldset',
      '#title' =&gt; t('Example vertical tab1'),
      '#collapsible' =&gt; TRUE,
      '#collapsed' =&gt; FALSE,
      // The #group value must match the name of the vertical tabs element.
      // In most cases, this is 'additional_settings'.
      '#group' =&gt; 'additional_settings',
      // Attach the javascript for vertical tabs.
      '#attached' =&gt; array(
        'js' =&gt; array(
          'vertical-tabs' =&gt; drupal_get_path('module', 'vertical_tabs_example') . '/vertical_tabs_example.js',
        ),
      ),
      '#tree' =&gt; TRUE,
      '#weight' =&gt; -2,
    );