View Full Version : Best way to dynamically add content if tab is clicked?

03-05-2012, 08:39 PM
Hello, I am just going through my javascript book and looking/learning at examples. I've copied this code and i'm thinking i could really use this in my site, it's something i've been looking for on the internet for a while.

I have a few questions regarding certain things and I would like to slightly change the code so it performs an additional task.

I have uploaded a live example of the page as it is a lot easier for you guys to help and also easier for myself to explain properly. The file is located here: JS test page (http://abjava.host22.com/template.htm).

As you can see, you click the different tabs and the relative information comes up.

1)How can I change the code so that if one description is currently on-screen, when another tab is clicked, i want to hide the currently displayed information, and show the relative information to that particular tab.

2)As you can see, clicking the tabs just brings up text saying 'Description for Tab' + #. This is added using the DOM, but i want to add a lot of description and obviously do not want to put an awful lot of text into the function. What is the best way to add this content dynamically? Should I create an XML file and access this file using javascript to display the different information?

I understand question 2 could be done using ajax and php but I know nothing about either so i was wondering if there was another way to achieve this?

Thank you for your time,



03-05-2012, 09:27 PM
Ideally you would want your content to display on browsers with javascript disabled, so you would want to load your content "naturally" in the html. Then, if javascript is functioning, you can collapse the content and show it at will

<div class="tabStrip">
<div id="tabStrip-tab-1" class="tabStrip-tab">News Update 1</div>
<div id="tabStrip-tab-2" class="tabStrip-tab">News Update 2</div>
<div id="tabStrip-tab-3" class="tabStrip-tab">News Update 3</div>
<div id="descContainer">
<div id="content1" class="descr">content1</div>
<div id="content2" class="descr">content2</div>
<div id="content3" class="descr">content3</div>

function showDescription(num)
var specialContent = GetClass('descr'); // collect all your elements with class "descr"
var num = num-1; // Tweak your num variable so that it plays nice with arrays

for (var i = 0 ; i<specialContent.length ; ++i) { // iterate through all your elements with class "descr"
specialContent[i].style.display = 'inline-block'; // Show your special content
specialContent[i].style.display = 'none'; // Hide all other content

window.onload = function(){ // The following needs to run after the HTML, so place your js at the end, or use onload, or use attachEvent, etc
var specialContent = GetClass('descr'); // collect all your elements with class "descr"

for (var i = 0 ; i<specialContent.length ; ++i) { // iterate through all your elements with class "descr"
specialContent[i].style.display = 'none'; // Hide your collapse-able content

//////// New Stuff Here...
GetClass = function(c) { // this helper functuion will allow you to collect all elements with a certain class in one array object- very useful!
var a = [] ,
d = [] ,
b = [];

a = document.getElementsByTagName('*');

for (var i = 0 ; i<a.length ; ++i) {
b = a[i].className.split(' ');
for(var j = 0 ; j<b.length ; ++j) {

return d;

This should address the stated issue of showing only one content and hiding the rest... But are you aware that the rest of your code leaves the tabs selected once clicked; thus preventing showDescription() from being called more than once per tab? This does not address that issue, mainly because I don't know if that was intentional.

Old Pedant
03-05-2012, 09:33 PM
I don't think that is very effective code. For one thing, because you have an event handler for the entire page it will make it more complex to add other things, later, as that master event handler will have to get ever more complex.

For another thing, there is no reason to dynamically add the content. Instead, just choose WHICH already-present content will be displayed.

Example code (old, not great, but works):

<style type="text/css">
div#ALL { position: relative; width:80%; height: 400px; margin-top: 30px; }
div.tabBody { position: absolute; top: 0px; left: 0px;
width: 100%; height: 100%;
z-index: 1;
background-color: yellow; border: solid brown 2px;
padding: 20px;
div.tabHead { position: absolute; top: -20px; left: 10px;
width: 100px; height: 22px;
z-index: 2;
text-align: center;
background-color: lightyellow; border: solid brown 2px; border-bottom: none;
<script type="text/javascript">
function front(which)
for ( var t = 1; t < 9999; ++t )
var dv = document.getElementById("TABBODY"+t);
if ( dv == null ) return;
dv.style.zIndex = t == which ? 5 : 1;
var tab = document.getElementById("TAB"+t);
tab.style.backgroundColor = t == which ? "yellow" : "lightyellow";
tab.style.zIndex = t == which ? 7 : 1;
<body onload="front(1);">
Stuff at the top of the page.
<div id="ALL">
<div id="TAB1" class="tabHead" onclick="front(1);">One</div>
<div id="TAB2" class="tabHead" onclick="front(2);" style="left: 140px;">Two</div>
<div id="TAB3" class="tabHead" onclick="front(3);" style="left: 260px;">Three</div>

<div id="TABBODY1" class="tabBody">
This is body 1
<div id="TABBODY2" class="tabBody">
2 2 second 2 2
<div id="TABBODY3" class="tabBody">
Third one


This could easily be improved so that the onclick handlers don't have to in the HTML code, if that's a concern. Personally, I don't mind it, but some purists do.