Question

Please bear with me here, there’s probably a simple answer…

I need to make a tabbed layout section with the simplest possible css and javascript.

I have some html divs arranged on top of each other using css, and initially have them all set to ‘visibility:hidden’. Here is the html…

<div id="tabs1" class="hide">
<div id="tabs2" class="hide">
<div id="tabs3" class="hide">

What I want to do is write some javascript to change the visibility property of one div to ‘visible’ when a link is clicked.

relevant CSS for this is just:

.hide { visibility: hidden; }
.show { visibility: visible; }

The following javascript works to change from hidden to visible by changing the class property –

function showThisTab(id)
{
// show this
document.getElementById(id).className += " show";
}

Using the following html links to call the function with onclick:

<a href="#" onclick="javascript:showThisTab('tabs1')">Tab 1</a>
<a href="#" onclick="javascript:showThisTab('tabs2')">Tab 2</a>
<a href="#" onclick="javascript:showThisTab('tabs3')">Tab 3</a>

All of the above works as it should, but obviously if you click more than one link, all the tabs end up being visible at once on top of each other. So I also need to reset all other tabs to hidden each time, leaving just the one the user clicked visible.

I rewrote my js to the following:

<script type="text/javascript">
/*<![CDATA[*/

function showThisTab(id)
{
var i = 1;

// hide all other tabs:
while(i<10) {
    var divID = 'tabs' + i;
    if (divID !== null) {
    document.getElementById(divID).className += " hide";
    }
    i++;
    }

// show this one
document.getElementById(id).className += " show";
}
/*]]>*/
</script>

This should iterate through the divs labelled tab1 to tab10 appending ‘hide’ to the class property (should work right?). After that, append ‘show’ to the one I want to show as normal.

However, the script just breaks, google chrome shows the following error: “Uncaught TypeError: Cannot read property ‘className’ of null”

This happens when it reaches the line:
document.getElementById(divID).className += ” hide”;

So by deduction it appears divID is somehow still null at this stage even with the if statement? I’m stuck here anyway, and it’s frustrating because I’m sure I’m close.

Anyone able to point me in the right direction?

tl;dr – Above code gives “Uncaught TypeError: Cannot read property ‘className’ of null” and I dunno why.

---

EDIT: @RichieHindle thanks for pointing out this fixes the error (I was being dumb as suspected)

I was also being dumb about the appending the classname, the working code is:

<script type="text/javascript">
/*<![CDATA[*/
function showThisTab(id)
{
var i = 1;
// hide all other tabs:
while(i<10) {
    var divID = 'tabs' + i;
    var div = document.getElementById(divID);
    if (div !== null) {
        div.className = " hide";
    }
    i++;
}
// show this one
document.getElementById(id).className = " show";
}
/*]]>*/
</script>

Answer 1

Did you mean:

var div = document.getElementById(divID);
if (div !== null) {
    div.className += " hide";

Your test:

if (divID !== null) 

will always succeed, even if no such div appears in the document.

Unless you have at least 10 tabs, your code will break when i exceeds the number of tabs.