According to Using the JHtmlTabs class in a component, several options may be specified for the tabs being rendered. However, using the example, none of the events fire, and the neither the initial "startOffset" or "useCookie" are respected - the page behaves the same whether this code is there or not with no JS errors indicated.

$options = array(
    'onActive' => 'function(title, description){
        console.info("Fired OnActive");                // Never fires
        description.setStyle("display", "block");
    'onBackground' => 'function(title, description){
        console.info("Fired OnBackground");            // Never fires
        description.setStyle("display", "none");
    'startOffset' => 4,                                // No tabs are active 
    'useCookie' => true,                               // Last active tab is not rememberd
    'active'    => 'myTabName'                         // Not in docs, but DOES work


Realization that I'm using the tabs with Bootstrap, the code is different for JHtml

// This works, per the docs, and using `tabs.start`, etc.
echo JHtml::_('tabs.start', 'tab_group_id', $options);
echo JHtml::_('tabs.panel', JText::_('PANEL_1_TITLE'), 'panel_1_id');
echo 'Panel 1 content can go here.';
echo JHtml::_('tabs.panel', JText::_('PANEL_2_TITLE'), 'panel_2_id');
echo 'Panel 2 content can go here.';
echo JHtml::_('tabs.end');

// This does NOT work, using `bootstrap.` 
echo JHtml::_('bootstrap.startTabSet', 'tab_group_id', $options);
echo JHtml::_('bootstrap.addTab', JText::_('PANEL_1_TITLE'), 'panel_1_id');
echo 'Panel 1 content can go here.';
echo JHtml::_('bootstrap.endTab');
echo JHtml::_('bootstrap.addTab', JText::_('PANEL_2_TITLE'), 'panel_2_id');
echo 'Panel 2 content can go here.';
echo JHtml::_('bootstrap.endTab');

echo JHtml::_('bootstrap.endTabSet');

Has anyone had any luck successfully working with $options and Bootstrap??

  • Hey, this was actually an issue with Joomla's core code. I created a PR here: github.com/joomla/joomla-cms/pull/6861 Give it a look and I'd appreciate if you could test it (once they stop having problems with Travis which is currently failing for every build).
    – clinch
    Apr 29, 2015 at 22:54

3 Answers 3


This is not an answer to the question, but is a solution to the problem that prompted the question using the jQuery Cookie Plugin:

jQuery(document).ready(function($) {
    var listItems = $("#tab_group_idTabs li");
    var prefix = 'myID-';
    listItems.each(function(li) {
        var a = $(this).children().first("a");
        var word = a.attr('href').replace('#','');
        a.attr('id',prefix+'A-' + word);    // Add an ID to the A
        a.addClass('myTabClass');           // Add a dashboard class to the A

    var activeTab = $.cookie("activeTab");  // Get the last active tab for the page
    if(activeTab === undefined){
        var activeTab = "#myID-A-tab3";     // Specify the default Tab ID here
    $.cookie("activeTab", activeTab);       // Store the last active tab
    $(activeTab).click();                   // Activate the active tab

    $(".myTabClass").click(function(){      // Click event to store last active tab
        var clickedTab = '#'+$(this).attr('id');
        $.cookie("activeTab", clickedTab);

Simply this works for me

$options = array(
'active'    => 'tab1_id'    // Not in docs, but DOES work
); ?>

<?php echo JHtml::_('bootstrap.startTabSet', 'ID-Tabs-Group', $options);?> 

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab1_id', JText::_('COM_BOOTSTRAPTABS_TAB_1')); ?> 
<p>Content of the first tab.</p> 
<?php echo JHtml::_('bootstrap.endTab');?> 

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-Group', 'tab2_id', JText::_('COM_BOOTSTRAPTABS_TAB_2')); ?> 
<p>Content of the second tab.</p> 
<?php echo JHtml::_('bootstrap.endTab');?> 

<?php echo JHtml::_('bootstrap.endTabSet');?>

add JHtml::_('behavior.tabstate');


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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