Test 2: making the box invisible (no bugs)

Proceed to test 3: the bug!
Back to test 1

This test uses exactly the same framework as test 1. The only difference is in the stylesheet "change.css". Instead of giving the box bigger text, we are going to make it invisible. Crucially, however, it will still be "displayed" (even though you can't see it, the browser can).

This box will become invisible when you click this link

Bring it back!

Explanation

This time, we use the CSS rule "visibility: hidden". This makes the box invisible.

Note that, after clicking the link, you can still scroll the page with your mousewheel or arrow keys.

Source files

The javascript and main stylesheet are the same as for test 1.

Here is the secondary stylesheet, "change.css":

div#change { visibility: hidden; }

Here is some text to force a scrollbar:







More text







More text







More text







More text







/End