Javascript: Active Content

If you look at any solution involving tabs, you will notice two things:

  • When you click on a tab, content is grabbed through ajax for the clicked tab.
  • Or it is made visible which was previously hidden.

As you might have guessed, it is better to go with the later approach because for the interface involving tabs, ajax doesn’t seem to be logical or fast solution. You click on a tab, content should be visible at the same time.

Well, the idea for the solution is simple:

You put all your content within the document inside some containers like DIVs and giving each DIV a unique ID which javascript needs to load the correct content based on the tab clicked. Also, you make the content for the first tab to be visible when page is loaded and hide rest of the DIVs. Finally, you use javascript to do the trick.

I have made a generic javascript solution that you can import into your page and use it straight away. Here is what you need to do to make your content always active:

  • Import the active content JS file into your file:
<script type="text/javascript" src="active_content.js"></script>
  • Where you generate your tabs, put links like this:
	<a href="#" onclick="show_content('div_1'); return false;">One</a>
	<a href="#" onclick="show_content('div_2'); return false;">Two</a>
	<a href="#" onclick="show_content('div_3'); return false;">Three</a>

As an example, when above links are clicked, they will show below divs:

	<div align="center" id="div_1" class="active_content">

		<h3 style="color:#FF0000;">Div One</h3>
		<p style="width:400px;">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</p>
	</div>

	<div align="center" id="div_2" class="active_content">
		<h3 style="color:#FF0000;">Div Two</h3>
		<p style="width:400px;">

			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</p>
	</div>

	<div align="center" id="div_3" class="active_content">
		<h3 style="color:#FF0000;">Div Three</h3>
		<p style="width:400px;">
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Vivamus non risus. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
		</p>
	</div>

Here is the active content javascript code:

//////////////////////////////////////////////////////////////////
//	- ACTIVE CONTENT -											//
//////////////////////////////////////////////////////////////////
//	Created By ;												//
// 	SARFRAZ AHMED CHANDIO										//
//	sarfraznawaz2005@gmail.com									//
//																//
//	Create Date: 30 Jan 2009									//
//	Last Update Date: N/A										//
//////////////////////////////////////////////////////////////////
//	Please keep this notice intact if you are using this file.	//
//////////////////////////////////////////////////////////////////

	addLoadListener	(init_dynamic_tabs);

	function init_dynamic_tabs()
	{
		var items = getElementsByAttribute("class", "active_content");
		var counter = 0;
		for (var i = 0; i < items.length; i++)
		{
			counter++;
			// make all items invisible except for the first one
			if (counter != 1)
			{
				items[i].style.display = "none";
			}
		}
	}

	function show_content(id)
	{
		var items = getElementsByAttribute("class", "active_content");

		// hide all items
		for (var i = 0; i < items.length; i++)
		{
			items[i].style.display = "none";
		}

		// show required item now
		document.getElementById(id).style.display = "block";
	}

	/* Very useful function for getting elements by their attributes */
	function getElementsByAttribute(attribute, attributeValue)
	{
	  var elementArray = new Array();
	  var matchedArray = new Array();
	  if (document.all)
	  {
		elementArray = document.all;
	  }
	  else
	  {
		elementArray = document.getElementsByTagName("*");
	  }
	  for (var i = 0; i < elementArray.length; i++)
	  {
		if (attribute == "class")
		{
		  var pattern = new RegExp("(^| )" +
			  attributeValue + "( |$)");
		  if (pattern.test(elementArray[i].className))
		  {
			matchedArray[matchedArray.length] = elementArray[i];
		  }
		}
		else if (attribute == "for")
		{
		  if (elementArray[i].getAttribute("htmlFor") ||
			  elementArray[i].getAttribute("for"))
		  {
			if (elementArray[i].htmlFor == attributeValue)
			{
			  matchedArray[matchedArray.length] = elementArray[i];
			}
		  }
		}
		else if (elementArray[i].getAttribute(attribute) ==
			attributeValue)
		{
		  matchedArray[matchedArray.length] = elementArray[i];
		}
	  }
	  return matchedArray;
	}

	// this will run the specified function on document load
	function addLoadListener(fn)
	{
	  if (typeof window.addEventListener != 'undefined')
	  {
		window.addEventListener('load', fn, false);
	  }
	  else if (typeof document.addEventListener != 'undefined')
	  {
		document.addEventListener('load', fn, false);
	  }
	  else if (typeof window.attachEvent != 'undefined')
	  {
		window.attachEvent('onload', fn);
	  }
	  else
	  {
		var oldfn = window.onload;
		if (typeof window.onload != 'function')
		{
		  window.onload = fn;
		}
		else
		{
		  window.onload = function()
		  {
			oldfn();
			fn();
		  };
		}
	  }
	}

Proceed to download the Active Content.