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?