I have this table element called semana2 in <tr> tag. How can I hide/show using only javascript (no jQuery)

I try this and won't work: document.getElementById('semana2').style.visibility = false;

I have this table element called semana2 in <tr> tag. How can I hide/show using only javascript (no jQuery)

I try this and won't work: document.getElementById('semana2').style.visibility = false;

• javascript
• html-table

• 1 use style.visibility = hidden instead of style.visibility = false; – Anant Dabhi Commented Jun 16, 2014 at 11:55
• false is not a valid value for visibility. Try hidden instead. But you might be looking for display:none rather than that... – Laurent S. Commented Jun 16, 2014 at 11:55
• 1 "hidden", not hidden, by the way. – Cerbrus Commented Jun 16, 2014 at 11:55

2 Answers 2

false isn't a valid value for the visibility property.

You should use one of these options:

• myElement.style.display = "none" (hide, and don't show an empty space)
• myElement.style.visibility = "hidden" or myElement.style.opacity = 0 (hide, but show an empty space where the element would be).

opacity has the nice property that it can be animated with a CSS transition, although you should be aware of limited patibility with IE < 9.

Incidentally, The valid values for visibility are visible | hidden | collapse - See the MDN documentation.

 document.getElementById('semana2').style.display = "none";

Visibility is also ok but you have to use it like:

document.getElementById('semana2').style.visibility = "hidden";

Just a note though, if you use visibility "hidden" the box of your element will still be rendered. I.e.: if you have a div 20x20 and apply visibility = "hidden"; to it, you will end up with a 20x20 empty square. While if you set display = "none"; then it will be like nothing is there at all.