Div Swapping

[worldofrugs]

This must be super simple, but have not found an easy solution to this...
I have a button inside a <div> and when I click this button, I want to hide this <div>, and show another <div> in it's place with other content.
Say the names (=id) of the DIV's are: Button / Result.

This should be very simple to accomplish with Javascript right? Anyone to help me out on this one?
Thanks!

[MrGimp]

Well Im still a novice JavaScipter. But you can do what you're talking about without using JavaScript. You can do it with CSS stylesheets. This is compatible with more computers and browsers as well. You just have two classes in your html div tags, one for the button div, the other for the result div.

In your first stylesheet, you define result as hidden, in your second stylesheet you define button as hidden. When the button is clicked, have it change stylesheets to the one you want using this command...

document.getElementById("styleID").href="resultStyle.css";

...where styleID and resultStyle can be whatever you name them. Just make sure the ID of your style tag in your HTML file matches the ID in those quotations.

For example, heres would be the necessary HTML file stylesheet declaration.

<link id="styleID" rel="stylesheet" type="text/css" href="originalStyle.css"/>

[MrGimp]

Also, visit CSS Zen Garden and click all those links on the right. They load different stylesheets. Look how dynamic the same HTML page can appear be!