Hiding Divs

Here's a quick example demonstrating how to toggle HTML elements within a webpage to a hidden/visible state, using Javascript.

There are several ways you can hide content using HTML & CSS, such as the style property 'visibility'.

However manipulating this property only determines the elements visibility on the webpage, and does not take into account removing it from the webpage's layout, so even when HTML element is hidden, it'll still take up the area on the page it normally would, you just can't see it.

So for this example I alter the 'display' property, which when set to 'none' directly removes the content from the user's view, as well as the overall layout of the webpage.

Javascript Code:

Show Spoiler!

You can use the div completely as normal, storing text, images, or other content
	Show Another Spoiler!
	

		
Like another hidden div
	

Languages used: HTML, Javascript, CSS

Comments