6

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.

enter image description here

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?

2

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
}
  • google.com/finance?q=NASDAQ:FLWS – GDP Dec 8 '14 at 19:07
  • Lol, well I think an included vase would be nice so I'll take these: interflora.co.uk/product/orchids/… – Lodder Dec 8 '14 at 19:11
  • I noticed that this doesn't add IDs to any of the LI or A items. Is there a way to add classes or IDs to the tabs to apply CSS or use jQuery for selected items? – GDP Dec 8 '14 at 20:14
  • @GDP - I know you know the answer to that ;) I'll post for info for this in an hour if you still require it – Lodder Dec 8 '14 at 20:20
  • 1
    Ah...the Yoda-Of-Front-End-Development is going to make the lowly systems guy sweat, huh? – GDP Dec 8 '14 at 20:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.