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 style.display property on each.

See also: Hide/Show by changing the class

DIV ID=one

DIV ID=two

When you click links "Show/Hide DIV ID=one" or "Show/Hide DIV ID=two", each DIV will either disapper or appear.

If you click "Show/Hide DIV ID=three", since there is no DIV with id=three, nothing happens. The good thing about this is that there is no error when trying to hide an object that does not exist on the page.

Here is the JavaScript function. It accepts 2 parameters. The first is the element that you are trying to change. The second is either "flip", or whatever style you want to assign to the element. "flip" toggles the element from "block" to "none" and back.

function safeToggleFieldDisplay(field, sDisplay){
    if((field) && ({
      if (sDisplay=='flip'){
        if ( == 'none'){
          sDisplay = 'block'; }
        else {
          sDisplay = 'none'; }
      } = sDisplay;
    //no handling - just preventing page explosions