Using the below code, I can successfully create the tabs that I need, however, the Tabs do not contain any IDs for specific styling or jQuery work.

There are a variable number of tabs, depending on User Group,etc., and most of them are updated on some interval with new information. Updating the content of each Pane is not a problem as they do have IDs, but addressing the relevant tab to alert the user of the new info is the problem.

Can the $options array contain specifications for IDs to be generated?

// Start Tabs
echo '<div class="tabbable tabs-left">';
echo JHtml::_('bootstrap.startTabSet', 'tab_group_ida', $options);
// Tab 1
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_1a', 'Tab 1');
echo '<p>Pri putant iisque detracto ut.</p>';
echo JHtml::_('bootstrap.endTab');
// Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_2a', 'Tab 2');
echo '<p>Duo delectus vivendum id, sit.</p>';
echo JHtml::_('bootstrap.endTab');
// Tab 3
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_3a', 'Tab 3');
echo '<p>Tamquam constituam an qui, ea.</p>';
echo JHtml::_('bootstrap.endTab');
// End Tabs
echo JHtml::_('bootstrap.endTabSet');
echo '</div>';

Firebug view of the tabs: Firebug view

3 Answers 3


Just use an attribute selector. You can target the href attribute in css with [href="#tabs_1a"] for example. I have no experience with jQuery, but the example in GDPs answer uses attribute selectors to add ids, so I'd guess jQuery supports this.

The bottom line is that you do not really need to add anything, just use attribute selectors to target something already existing, in your case href.

Sometimes :nth-child is a viable alternative.


If you look at the source code of the page, you'll see that Joomla is using jQuery to append the LI and A elements at runtime. You can use the same technique to add IDs, Classes, CSS, or any other attributes that you may need.

Use this jQuery code to add a prefix to the tab's name, then add the ID attribute to the anchor.

Note: Insure the code is run after Joomla creates the tabs, otherwise they won't yet exist to operate on.

jQuery(document).ready(function($) {
    var idPrefix = 'myId-';
    $("#tab_group_idaTabs li").each(function(li) {
        var a = $(this).children().first("a");
        var tabname = a.attr('href').replace('#','');
        a.attr('id',idPrefix + tabname);
  • Please, don't set inline css styles though. That's not cool. Dec 10, 2014 at 20:04
  • True, it's there only to demonstrate a supported jQuery method
    – GDP
    Dec 10, 2014 at 20:08
  • jQuery(document).ready(function($) { }); << Use this to wrap around your jQuery code, rather than using (function($){ and then $(document).ready(function() {. @Seth is right, you should only need to use jQuery to add your classes and the rest can be done with pure CSS.
    – Lodder
    Dec 10, 2014 at 22:27
  • Point taken on the CSS, lol....was just a random attribute to demonstrate.
    – GDP
    Dec 10, 2014 at 22:29
  • Also be sure to make $('a[href="#tabs_1a"]') and the other objects a variable if you're using them more than once, just as you have with the first tab :)
    – Lodder
    Dec 10, 2014 at 22:30

I was trying to add ico-moon icons to a tab and you could wrap the a in a tag:

    // Tab 2
echo JHtml::_('bootstrap.addTab', 'tab_group_ida', 'tabs_2a', '<i class="icon-info"><i>'.Tab 2');

so you could also wrap it in a span:

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab2_id', '<span class="icon-signup">'.JText::_('DESCRIPTION').'</span>'); ?> 

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.