javascript replace div on each click

I will suggest you some best practices in this answer:

• Use classes instead of the style property, it's way nicer for the browser.
• Don't use inline event handler. See the example below.
• It's not "replace" you're looking for, it's "toggling".
• I suggest you use event bubbling. This way, you add a single event on the container of all your div, and you can work on this.

Alright, now for the example:

HTML:

<div id="container">
    <div id="div1">..</div>
    <div id="div2" class="hidden">..</div>
    <div id="div3" class="hidden">..</div>
</div>

JS:

// Notice how I declare an onclick event in the javascript code
document.getElementById( 'container' ).onclick = function( e ) {

    // First, get the clicked element
    // We have to add these lines because IE is bad.
    // If you don't work with legacy browsers, the following is enough:
    //     var target = e.target;
    var evt = e || window.event,
        target = evt.target || evt.srcElement;

    // Then, check if the target is what we want clicked
    // For example, we don't want to bother about inner tags
    // of the "div1, div2" etc.
    if ( target.id.substr( 0, 3 ) === 'div' ) {

        // Hide the clicked element
        target.className = 'hidden';

        // Now you have two ways to do what you want:
        //     - Either you don't care about browser compatibility and you use
        //       nextElementSibling to show the next element
        //     - Or you care, so to work around this, you can "guess" the next
        //       element's id, since it remains consistent
        // Here are the two ways:

        // First way
        target.nextElementSibling.className = '';

        // Second way
        // Strip off the number of the id (starting at index 3)
        var nextElementId = 'div' + target.id.substr( 3 );
        document.getElementById( nextElementId ).className = '';
    }
};

And of course, the CSS:

.hidden {
    display: none;
}

I highly suggest you read the comments in the javascript code.

If you read carefully, you'll see that in modern browsers, the JS code is a matter of 5 lines. No more. To support legacy browsers, it requires 7 lines.