How to hide and show all the content of a div with JavaScript?

Question

For example, the div contains:

    <div id="choices">
            <ul>
                <li><button onclick="Correct('incorrect, try again!')">simple, easy</button></li>
                <li><button onclick="Correct('Correct! Congratulations!')">influence, advantage</button></li>
                <li><button onclick="Correct('incorrect, try again!')">premium, fine</button></li>
                <li><button onclick="Correct('incorrect, try again!')">contrary, opposite</button></li>

            </ul>
            </div>

I want to hide the content of this div completely with a function, and make it reappear with another function. Is that possible?

Answer 1

document.getElementById('choices').style.display = "none"; //hide
document.getElementById('choices').style.display = "block"; //show

Answer 2

You can use jQuery to accomplish the task too. With it you can use some effects too. Take a look: http://jsfiddle.net/davidbuzatto/wZTs7/