As you know, since Joomla! 3.0 was implemented a new user interface based on Twitter Bootstrap. This article will describe how you can use the Bootstrap tabs and accordion slides in your extensions. I will show you step by step how to load library and how to use the new features. At the end of the article, there is an attachment with source code that you can download and view.

Load bootstrap library

The first thing you need to do is to load the library, which you will use to render HTML code for tabs and slides. You can load it in the main view script. In my case, it is "administrator/components/com_bootstraptabs/views/tabs/view.html.php".

Place the following code at the beginning of the script.

jimport ('joomla.html.html.bootstrap');

Bootstrap tabs in Joomla! 3.0

Add a list with tabs titles in the file that contains the HTML code. The file is "articles/administrator/components/com_bootstraptabs/views/tabs/tmpl/default.php".

<ul class="nav nav-tabs" id="ID-Tabs-Group">
     <li class="active">
         <a data-toggle="tab" href="#tab1_id">Tab 1</a>
         <a data-toggle="tab" href="#tab2_id">Tab 2</a>
  • Set ID for the tags group to the "ul" element.
  • Specify the active tab adding class="active" to one of "li" elements.
  • Set ID within the "href" attribute of the "a" elements. That ID points to elements that contain the content of these tabs.

Now add code that will initialize the initial part of the item. This element will contain tabs content.

<?php echo JHtml::_('bootstrap.startPane', 'ID-Tabs-Group', $this->tabsOptions);?>  
  • Specify the ID of the elements group as a second parameter.
  • Specify the options of the tabs as a third parameter:
    • active - you should specify the ID of the tab that will be opened when the page loads.

Add your first tab by opening it with the method "addPanel". Add the content and close it with "endPanel". Follow the example below.

<?php echo JHtml::_('bootstrap.addPanel', 'ID-Tabs-Group', 'tab1_id'); ?> 
<p>This is the content of the first tab</p>
<?php echo JHtml::_('bootstrap.endPanel');?>
  • Specify the ID of the group (ID-Tabs-Group). You set it on the list of names above.
  • Specify the ID of the item (tab1_id), where will be the content. It must satisfy the value that you specified in the "href" attribute of the first tab.

Repeat last instruction to add other tabs that names were defined above.

Now you need to close the element in which are arranged the group of elements with the content of the tabs. This will be done via method "endPane", which I mentioned above.

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

Bootstrap tabs in Joomla! 3.1

The Joomla production team made several changes to the bootstrap HTML helper in version 3.1. In this release, developers should use other methods. Now I will show you how to use them to create bootstrap tabs.

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

<?php echo JHtml::_('bootstrap.addTab', 'ID-Tabs-J31-Group', 'tab1_j31_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-J31-Group', 'tab2_j31_id', JText::_('COM_BOOTSTRAPTABS_TAB_2')); ?>
<p>Content of the second tab.</p>
<?php echo JHtml::_('bootstrap.endTab');?>

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

Besides the difference in the names of the methods that generate HTML code of tabs, there is another. The names of the tabs are set by the third parameter of the method "addTab", which opens it.

The old way of generating tabs will work until Joomla! 4.0 release. From that version, the methods startPane, endPane, addPanel, endPanel will be removed.

Bootstrap accordion slides

The method that generates slide is similar to the method that generates tab, with small difference. The names of the slides are set in the method that starts an element which will contain a slide content. It is not necessary to define them separately, as in the examples above.

<?php echo JHtml::_('bootstrap.startAccordion', 'slide-group-id', $this->slidesOptions); ?>
  • Set group ID slides as a second argument.
  • Define and set options of the slides by third argument:
    • active - you should specify the ID of the active slide, which will be open when the page loads.
    • parent - you can specify the ID of parent accordion element. And when all collapsible elements under the specified parent will be closed when this collapsible item is shown.
    • toggle - you should set boolean value (true or false). It toggles the collapsible element on invocation.

Now open the slide element with the method "addSlide", add content, and finally close the element by the method "endSlide".

  • As a second argument you have to specify group ID.
  • By third argument specify the name of the slide.
  • By the fourth argument specifying its ID.
<?php echo JHtml::_('bootstrap.addSlide', 'slide-group-id', JText::_('COM_BOOTSTRAPTABS_SLIDE_1'), 'slide1_id'); ?> 
<p>The content of the slide</p>
<?php echo JHtml::_('bootstrap.endSlide'); ?>

Finally, you need to close the item in which you have added the slides. Use the method "endAccordion".

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

This was the main way to generate Bootstrap tabs and slides in your Joomla! extensions. If some of the functionality be changed in the future, I will mention it, here in this article. I will try to keep the information up to date.

Furthermore, you can download the source code from the link below. Install it, view it and test it to get a clearer picture of how it works.

A component for Joomla! 3.x

Share this post

Submit to DeliciousSubmit to DiggSubmit to FacebookSubmit to Google PlusSubmit to StumbleuponSubmit to TechnoratiSubmit to TwitterSubmit to LinkedIn

Free Subscription

You can get the latest publication via RSS, Twitter or Facebook. And I can also deliver last news to you for free via Email:

RSS subscription Find us on Facebook Google+ page Follow me