A good way to do this is using a tab set, that is, a clickable set of information panes.

This article shows how to do this using Joomla Bootstrap. The Bootstrap framework is a jQuery plugin which is distributed as part of the Joomla core.

The image below has an example of tabs in action:

When you click on 'description' it brings up the description pane:-

The code for Bootstrap tabs

To create a tabset we use the function JHtml::_('bootstrap.startTabSet'). Usually this would be placed in an extension template file. A simple example of the code to do this shown below.

<?php echo JHtml::_('bootstrap.startTabSet', 'myTab', array('active' => 'name')); ?> //start tab set

  <?php echo JHtml::_('bootstrap.addTab', 'myTab', 'name', JText::_('COM_EXAMPLE_NAME')); ?> //start tab pane 1
 			<h3><?php echo $this->item->title; ?></h3>
            <p>Author: <?php echo $this->item->author; ?></p>
  <?php echo JHtml::_('bootstrap.endTab'); ?> //end tab pane 1

  <?php echo JHtml::_('bootstrap.addTab', 'myTab', 'desc', JText::_('COM_EXAMPLE_DESCRIPTION')); ?> //start tab pane 2
 			<?php echo $this->item->description; ?>
  <?php echo JHtml::_('bootstrap.endTab'); ?> //end tab pane 2

  <?php echo JHtml::_('bootstrap.addTab', 'myTab', 'price', JText::_('COM_EXAMPLE_PRICE')); ?> //start tab pane 3
 		<?php echo $this->item->price; ?>
  <?php echo JHtml::_('bootstrap.endTab'); ?> //end tab pane 3

<?php echo JHtml::_('bootstrap.endTabSet'); ?> //end tab set

Notice that the tab set is closed at the end using 'bootstrap.endTabSet', while the individual panes are enclosed using 'bootstrap.addTab' and 'bootstrap.endTab'. You can put any HTML that you want on each pane in between the start and end of the tabs.

Digging into the code for Bootstrap tabs

When you create a tab set you need to give it a name, which in this case it is called 'myTab'. This name is passed as the first argument to 'bootstrap.addTab' so that the tab can be correctly added to the tab set. You can have more than one tab set on a page. For example, a second set could be called 'myTab2'.

Each tab pane is also given a unique name as well, which is passed as the second argument to 'bootstrap.addTab'. In this case they are called 'name', 'desc' and 'price'. It is important that these names are unique. You can use the tab name to set the active pane which the user sees when the page is loaded.

The third argument passed to 'bootstrap.addTab' is the label which the user will see as the clickable tab button. As a consequence, it is important to make it translateable using JText.

Loading the Bootstrap CSS

In order to function, the tab set also requires the Bootstrap CSS styles. Many templates, such as Joomla's default Protostar template, already incorporate the Bootstrap CSS so you may not need to worry about this. You will know whether Bootstrap is loaded if the tabs are formatted properly. If they just look like a normal HTML list then you will need to load the CSS. Also if you are creating an extension that will be used on multiple sites you should add some optional code to load the Bootstrap CSS, something like this:

<?php
if((bool)$params->get("loadBootstrap",1))
{
  JHTML::_('stylesheet','media/jui/css/bootstrap.min.css',false);
}
?>

Layout Options

There is a single layout option available for Joomla tabsets, in our example it is passed in the array that is supplied as the second argument to 'bootstrap.startTabSet':

array('active' => 'name')

This allows you to set the tab pane which will be visible when the page is loaded, for example if you want the description pane to be the active one then you would change the code to:-

array('active' => 'name')

If you want to make more advanced changes to the layout of the tab set then you can do this by overriding the layouts. You do this by including a layouts folder in your extension or template, and putting your override versions there. You can find the core Joomla layouts for the tabset in the folder 'layouts/libraries/cms/html/bootstrap'. You can find out more about using Joomla layouts by clicking this link.

Oh, and if you need a short cut, you can also try the Tabs and Sliders extension. With over 1 million downloads, you can't go wrong.

Fiona Coulter has 10 years of experience as a Joomla extension developer, specializing in PHP and Javascript. She works at https://spiralscripts.co.uk.