Skip to main content | Turn off styling Default page style

Question & Answer index

Hide/Show Div page content (div, p, input, etc.)

"How do I make items on my page appear or disappear?

Here is a basic example where 2 items appear on the page and we will make them "Hide" or "Show" by changing the class associated with each.

Note: There are a lot of ways to do this. This example presumes that each element that you are hiding or showing will only ever have 1 class assigned to it - which is not always the case.

Also, if you try to toggle the class of an element that does not have any class assigned to it (DIV3), that element does not hide or show.

See also: Hide/Show by changing style.display

Click to toggle display of DIV1 or DIV2, or DIV3.

Here's how it works: