How do I change the CSS property "display" in javascript

Question

How do I change the CSS property display, in JavaScript, from display:none to display:normal for these divs?

#hide_0 { display:none }
#hide_1 { display:none }
#hide_2 { display:none }
#hide_3 { display:none }
#hide_4 { display:none }
#hide_5 { display:none }

Only one at a time. I need to display one and hide the rest.

What I used:

var persistent_element='hide_1';

function link_update(link_display)
  {
  var local_element;
  local_element=document.getElementById(persistent_element);  
  local_element.style.display='none';
  local_element=document.getElementById(link_display);
  local_element.style.display='block';
  persistent_element=link_display;
  }

How I connected it : m4 is a minified - connects onclick to these methods

m4('l1',function {return link_update(hide_1);}); 
m4('l2',function {return link_update(hide_2);});
m4('l3',function {return link_update(hide_3);});
m4('l4',function {return link_update(hide_4);});
m4('l5',function {return link_update(hide_5);});
m4('l6',function {return link_update(hide_6);});

Note that “normal” is not a valid value for the CSS display property. — Paul D. Waite
– Paul D. Waite, Commented Nov 9, 2011 at 22:56
@MikeRobinson - I agree, it's good to answer JS questions without jQuery (when the OP doesn't mention jQuery), but it really would make this so much easier! — James Allardice
– James Allardice, Commented Nov 9, 2011 at 23:05
you write connects onclick ,How you connect without showing in your html ! You had set display none all in your css is can't handle onclick [without display] — Jack jdeoel
– Jack jdeoel, Commented May 11, 2016 at 4:02

jfriend00 · Accepted Answer · 2011-11-09 23:08:00Z

10

To use javascript to change the style, you can do it like this:

// hide an element
document.getElementById("hide_0").style.display = "none";

// show a block element
document.getElementById("hide_1").style.display = "block";

// to go back to the default or CSS specified value
document.getElementById("hide_2").style.display = "";

So, if you wanted to hide all and show one, you could do that with this function:

function showOneHideOthers(base, len, numToShow) {
    // objects must have ids like base_0, base_1, etc...
    for (var i = 0; i < len; i++) {
        if (i != numToShow) {
            document.getElementById(base+i).style.display = "none";
        }
    }
    document.getElementById(base+numToShow).style.display = "block";
}

showOneHideOther("hide_", 6, 2);

P.S. normal is not a valid value for the display property. The typical values are block, none and inline and there are others like inline-block, table, etc....

edited Nov 9, 2011 at 23:08

answered Nov 9, 2011 at 22:56

jfriend00

711k104 gold badges1.1k silver badges1k bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

jfriend00 Over a year ago

You can either hide all the other ones (it doesn't hurt to hide something that is already hidden) or you can keep a variable that remembers the currently visible one so you can just hide that one. I added a function to do that to my answer.

jfriend00 Over a year ago

I added a code example to my answer that doesn't need that variable. You just call a function with the base name, the number of total items and the one you want to be shown.

Steve Adams Over a year ago

easier to keep one variable...please look at my edit...will this work?

jfriend00 Over a year ago

Your code is the general idea, but it looks like you use link_hide in one place and persistent_element in another and you have to assign persistent_element to the value that you just made visible.

jfriend00 Over a year ago

It looks like what you have should work. My method didn't require any global variables or any state (that's why I wrote it that way). In a small project, appropriately and uniquely named globals are no big deal. In a large project, globals should be namespaced to avoid top level naming collisions.

|

James Allardice · Accepted Answer · 2011-11-09 22:54:58Z

1

Your question is not particularly clear, but the essence of what you want to do is simple. You can get a reference to a DOM element which has an id using getElementById, and you can change the display property:

document.getElementById("hide_0").style.display = "none"; //or "block"

However, you have several element that you want to hide/show (I'm not sure when you want to do so), so it may be easier to use a different method of selecting the elements (such as getElementsByTagName, or getElementsByClassName, but it depends on your HTML and what you're actually trying to do).

answered Nov 9, 2011 at 22:54

James Allardice

166k22 gold badges335 silver badges315 bronze badges

1 Comment

Steve Adams Over a year ago

Excellent...how do I hide the previously visible div...is there a way to have javascript remember the previously visible div via a staic variable of sorts?...thanks

GAgnew · Accepted Answer · 2011-11-09 22:54:08Z

0

You can set a css property on an element using the style method.

div.style.display = '';

answered Nov 9, 2011 at 22:54

GAgnew

4,1053 gold badges28 silver badges29 bronze badges

2 Comments

Andy E Over a year ago

This won't work as the styles are being set via CSS. To override them you need to actually specify a value to override them with.

Andy E Over a year ago

no, it's not. Valid values are listed at w3.org/TR/css3-box/#the-lsquo. What you have would work if display were set from an inline style attribute, but not from a stylesheet.

Collectives™ on Stack Overflow

How do I change the CSS property "display" in javascript

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related