My Javascript doesn't work. Don't know if it's the Function, how I'm calling it, the CSS I used or what

Question

My function:

function ChangeStep(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";
}

How I'm calling it:

<div id="prev"><img src="img/prv.png" onClick="ChangeStep('tabs1'); return false;"></div>
<div id="next"><img src="img/nxt.png" onClick="ChangeStep('tabs2'); return false;"></div>

The Divs I want to show/hide:

<div id="tabs1" class="hide"><h1>Step 1</h1></div>
<div id="tabs2" class="show"><h1>Step 2</h1></div>

My Css:

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

Basically what I want to do is: When I click Next or Previous, show the corresponding "Tab" by hiding all the others and showing this. This should be done by adding the class "Hide" or "Show" depending on if it is to be hidden or visible.

Answer 1

You are always appending class names, so they will (after being shown once) be members of both the show and hide classes and both rulesets will apply (in the normal cascade order).

If you don't need to maintain any other classes, you can replace your append operator += with a simple assignment: =

If you do need to maintain other classes on the elements, then you can use classList instead.

document.getElementById(divID).classList.remove('show');
document.getElementById(divID).classList.add('hide');

If you need to support Old-IE then you can use a polyfill (which will probably run regex over the classList ) or an API that provides similar functions. Most common JS libraries (such as YUI and jQuery) have one built in.