Question

I want two buttons, that are oppositely shown or hidden when clicked. (i.e., via style:display=none|block;).

Initially, button1 would be display:block and button2 would be display:none.

When you click button1, it would switch button2 to be display:block and button1 to be display:none.

I know this is probably somthing so simple, please excuse my lack of knowledge.

Answer 1

First we create two buttons. Give them id attributes so we have an alias by which to access them:

<button id="first">Click</button> <button id="second">Second</button>

Set the CSS as you defined:

#first  { display: block; }
#second { display: none;  }

Then comes the JS. We access both elements through their IDs using a function called document.getElementById(). This will return the element with the specified ID.

var first = document.getElementById( 'first' ),
    second = document.getElementById( 'second' );

And now we can make a toggle function. Here is the concept: If the display attribute of the first element is “block”, then we change it to “none” and we change the latter to “block”. And vice-versa. Here it is:

function toggle() {

    if ( first.style.display === "block" ) {

        first.style.display = "none";
        second.style.display = "block";

    } else { // switch back

        first.style.display = "block";
        second.style.display = "none";

    }

}

Then we set the event handlers in the HTML thusly:

<button id="first" onclick="toggle();">First</button>
<button id="second" onclick="toggle();">Second</button>

or we can do it using JS:

first.onclick = toggle;
second.onclick = toggle;

I like the second better, we’ll stick with that,

And there you have it. You can find a working example here — http://jsfiddle.net/twEK5/