How can I use JHtml to create Vertical Tabs

Question

Using this standard JHtml code, I can generate Horizontal tabs (across the top) without problem. I've been tinkering with the $options array to set it up, but JHtml seems to have changed a bunch, and I don't seem to be able to find the secret combination of settings to get Vertical tabs instead.

JHtml that renders Horizontal Tabs

$options = array(
    'useCookie' => true, // this must not be a string. Don't use quotes.
);
echo JHtml::_('tabs.start', 'tab_group_id', $options);
echo JHtml::_('tabs.panel', 'Tab Heading 1', 'panel_1_id');
echo 'Panel 1 content goes here.';
echo JHtml::_('tabs.panel', 'Tab Heading 2', 'panel_2_id');
echo 'Panel 2 content goes here.';
echo JHtml::_('tabs.panel', 'Tab Heading 3', 'panel_3_id');
echo 'Panel 3 content goes here.';
echo JHtml::_('tabs.end');

HTML that renders the desired Vertical tabs

<div id="my-panels" class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li><a href="#panel_1_id" data-toggle="tab">Tab Heading 1</a></li>
        <li><a href="#panel_2_id" data-toggle="tab">Tab Heading 2</a></li>
        <li><a href="#panel_3_id" data-toggle="tab">Tab Heading 3</a></li>
    </ul>
    <div class="tab-content">
        <div class="tab-pane" id="panel_1_id">Some Content1</div>
        <div class="tab-pane" id="panel_2_id">Some Content2</div>
        <div class="tab-pane" id="panel_3_id">Some Content3</div>
    </div>
</div>

Is it something in $options that has to be set, or is it something else altogether in JHtml that I should be using?

Answer 1

Firstly, you are using the Joomla 3.0 method for adding tabs. There is a newer method as of Joomla 3.1 which unfortunately is not documented at all apart from the API page.

With the new tab method, all you need to do is wrap it round a div with a specific class like so:

$options = array(
    'useCookie' => true,
    'active' => 'tabs_1'
);

// Start Tabs
echo '<div class="tabbable tabs-left">';
echo JHtml::_('bootstrap.startTabSet', 'tab_group_id', $options);

// Tab 1
echo JHtml::_('bootstrap.addTab', 'tab_group_id', 'tabs_1', 'Tab 1');
echo '<p>Lorem ipsum dolor.</p>';
echo JHtml::_('bootstrap.endTab');

// Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_id', 'tabs_2', 'Tab 2');
echo '<p>Lorem ipsum dolor.</p>';
echo JHtml::_('bootstrap.endTab');

// End Tabs
echo JHtml::_('bootstrap.endTabSet');
echo '</div>';

Tested and working in Joomla 3.3.6

Update:

If you wish you style the tabs in some way, shape or form, you can simply add a class to the div wrapper like so:

echo '<div class="tabbable tabs-left gdp-tabs">';

and then to style the a or li elements, simply use:

.gdp-tabs li {
   //code here
}
.gdp-tabs li a {
   //code here
}