Create Tabbed Content Module in Joomla

In this article, we are going to discuss about How to create a tabbed content module in Joomla. Creating the module with tabbed pane requires some knowledge of javascript. Joomla is an award-winning content management system (CMS), which enables you to build Web sites and powerful online applications. Many aspects, including its ease-of-use and extensibility, have made Joomla the most popular Web site software available. Best of all, Joomla is an open source solution that is freely available to everyone.

1) <div> tag is added for each Tabbed Menu, which is placed in one row in <table>. Provide Unique id to each tabbed menu.
2) Content to be displayed is also placed in <div> tag in another row of the <table>, with another id.
3) Click event is added to each tabbed menu in Javascript when the document is loaded using addEventListener() function for non IE and attachEvent() function for IE.

For non Internet Explorer add the below code

document.getElementById('divTitleTab1').addEventListener("click",titleDivTab1Func, false,true);

For Internet Explorer add the below code

document.getElementById('divTitleTab1').attachEvent("onclick",titleDivTab1Func);

titleDivTab1Func is the name of the function to be executed when click event occurs.

How to determine whether IE or non IE?

window.addEventListener returns true for non IE and false for IE.

if(window.addEventListener) {
}
else {
}

4) titleDivTab1Func function contains the code to be executed when user clicks on the tabbed menu. If user clicks on the tabbed menu its content should be displayed below it. It is done by setting innerHTML of the element with id of the content div.

document.getElementById("divContentTab").innerHTML = " you are under Tab 1";

5) Calling Javascript from helper.php

It is done by script() function of the JHtml class, which is used as shown below.

JHTML::_('script',"tabbed.js",JURI::base().'/modules/mod_tabbed/js/',true);

The last argument determines whether to load Mootools or not. Mootools is loaded if this argument is true. Here we have created 4 tabbed menu.

Files Required

1) mod_tabbed.php: This file is the entry point for the module. It will perform necessary initializations and call helper routine to collect necessary data and include the template which will display module output.

2) helper.php: This file contains the helper class which will collect necessary data to be used in the module from database or any other sources.

3) mod_tabbed.xml: This file contains the information about the module. This is the installation file for the module.

4) tmpl/default.php: This is the file used for displaying the module output.

5) js/tabbed.js: This file will contain necessary javascript code to be executed.

1) Creating file mod_tabbed.php with the below code

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
// Include the syndicate functions only once
require_once( dirname(__FILE__).DS.'helper.php' );
$hello = modTabbedHelper::getHello( $params );
require( JModuleHelper::getLayoutPath( 'mod_tabbed' ) );
?>

2) Creating file helper.php

This file contains the class as defined in mod_ varreq.php ,here it is modVarreqHelper class and contains function getHello(). The complete code of helper.php is

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
class modTabbedHelper
{
static function getHello($params)
{
JHTML::_('script',"tabbed.js",JURI::base().'/modules/mod_tabbed/js/',true);
return 'Helper Tabbed Pane';
}
}
?>

3) Creating installation file mod_tabbed.xml

This file contains the information about the module. The complete code of mod_tabbed.xml is

<?xml version="1.0" encoding="utf-8"?>
<extension type="module" version="2.5" client="site" method="upgrade">
<name>tabbed</name>
<author>Larenge Kamal</author>
<version>1.7</version>
<description>Tabbed Pane! module.</description>
<files>
<filename>mod_tabbed.xml</filename>
<filename module="mod_tabbed">mod_tabbed.php</filename>
<filename>index.html</filename>
<filename>helper.php</filename>
<filename>tmpl/default.php</filename>
<filename>tmpl/index.html</filename>
<filename>tmpl/logo1.bmp</filename>
<filename>js/tabbed.js</filename>
</files>
<config>
</config>
</extension>

4) Creating file tmpl\default.php

This file contains the output to be displayed by the module. This file has the same scope as that of the mod_tabbed.php. So the variables defined in mod_tabbed.php can be directly accessed in this file. '$hello' variable defined in mod_tabbed.php can be directly accessed here.

The complete code of tmpl\default.php is

<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
?>
<html>
<body>
<table style="border:2px solid #E0E0E0; padding:0px; margin:0px" width="100%" cellspacing="0" cellpadding="0">
<tr>
<td style="padding:0px; margin:0px" width="auto">
<div style="background-color: #F3F3F3; color: black;font-weight: bold; padding: 0px 0px 0px 10px;cursor: pointer; border:2px solid #E0E0E0" id="divTitleTab1" class="mainTitle">
<b id="subTitle">Tab1</b>
</div>
</td>
<td style="padding:0px; margin:0px">
<div style="background-color: #F3F3F3; color: black;font-weight: bold; padding: 0px 0px 0px 10px;cursor: pointer; border:2px solid #E0E0E0" id="divTitleTab2" class="mainTitle">
<b id="subTitle">Tab2</b>
</div>
</td>
    
<td style="padding:0px; margin:0px">
<div style="background-color: #F3F3F3; color: black;font-weight: bold; padding: 0px 0px 0px 10px;cursor: pointer; border:2px solid #E0E0E0" id="divTitleTab3" class="mainTitle">
<b id="subTitle">Tab3</b>
</div>
</td>
    
<td style="padding:0px; margin:0px">
<div style="background-color: #F3F3F3; color: black;font-weight: bold; padding: 0px 0px 0px 10px;cursor: pointer; border:2px solid #E0E0E0" id="divTitleTab4" class="mainTitle">
<b id="subTitle">Tab4</b>
</div>
</td>
    
</tr>
<tr>
<td colspan="4" style="padding:0px; margin:0px">
<div style="color: black;padding: 0px 0px 0px 10px;border:2px solid #E0E0E0" id="divContentTab" class="mainTitle">
here is tab content
</div>
</td>
    
</tr>
</table>
</body>
</html>

5) Creating file index.html common to all

The complete code of index.html is

<html><body bgcolor="#FFFFFF"></body></html>

6) Creating file js\tabbed.js

This file contains the javascript code. The complete code of js\tabbed.js is

window.addEvent("domready",function(){
if(window.addEventListener) {
document.getElementById('divTitleTab1').addEventListener("click",titleDivTab1Func, false,true);
document.getElementById('divTitleTab2').addEventListener("click",titleDivTab2Func, false,true);
document.getElementById('divTitleTab3').addEventListener("click",titleDivTab3Func, false,true);
document.getElementById('divTitleTab4').addEventListener("click",titleDivTab4Func, false,true);
}
else if(window.attachEvent) { //IE
document.getElementById('divTitleTab1').attachEvent("onclick",titleDivTab1Func);
document.getElementById('divTitleTab2').attachEvent("onclick",titleDivTab2Func);
document.getElementById('divTitleTab3').attachEvent("onclick",titleDivTab3Func);
document.getElementById('divTitleTab4').attachEvent("onclick",titleDivTab4Func);
}
});

function titleDivTab1Func() {
var oDiv = document.getElementById("divContentTab");
oDiv.style.display = "block";
document.getElementById("divTitleTab1").style.background = "#FFFFFF";
document.getElementById("divTitleTab2").style.background = "#F3F3F3";
document.getElementById("divTitleTab3").style.background = "#F3F3F3";
document.getElementById("divTitleTab4").style.background = "#F3F3F3";
oDiv.innerHTML = " you are under Tab 1";
}

function titleDivTab2Func() {
var oDiv = document.getElementById("divContentTab");
oDiv.style.display = "block";
document.getElementById("divTitleTab2").style.background = "#FFFFFF";
document.getElementById("divTitleTab1").style.background = "#F3F3F3";
document.getElementById("divTitleTab3").style.background = "#F3F3F3";
document.getElementById("divTitleTab4").style.background = "#F3F3F3";
oDiv.innerHTML =" You are in Tab 2" ;
}

function titleDivTab3Func() {
var oDiv = document.getElementById("divContentTab");
oDiv.style.display = "block";
document.getElementById("divTitleTab3").style.background = "#FFFFFF";
document.getElementById("divTitleTab1").style.background = "#F3F3F3";
document.getElementById("divTitleTab2").style.background = "#F3F3F3";
document.getElementById("divTitleTab4").style.background = "#F3F3F3";
oDiv.innerHTML ="Congratulations! You have a Joomla! site! Joomla! makes it easy to build a website just the way you want it and keep it simple to update and maintain.in tab3" ;
}

function titleDivTab4Func() {
var oDiv = document.getElementById("divContentTab");
oDiv.style.display = "block";
document.getElementById("divTitleTab4").style.background = "#FFFFFF";
document.getElementById("divTitleTab1").style.background = "#F3F3F3";
document.getElementById("divTitleTab2").style.background = "#F3F3F3";
document.getElementById("divTitleTab3").style.background = "#F3F3F3";
oDiv.innerHTML ="Joomla! is a flexible and powerful platform, whether you are building a small site for yourself or a huge site with hundreds of thousands of visitors. You are in Tab 4" ;
}

Now create the zip file of the folder 'mod_tabbed' which contains the following files.

1. mod_tabbed.php
2. index.html
3. mod_tabbed.xml
4. helper.php
5. tmpl\default.php
6. tmpl\index.html
7. js\tabbed.js

The above zip file can now be installed using Joomla extension manager. After installing the module,' tabbed' module will appear in the module manager.