I've read similar posts but i only found where it says to add class to the HTML to do what i want, so, basically i have a button, that when i want to click it hides ALL code HTML tags, and when i click it again it shows them. Since i have a lot of code tags in a page it would take me quite a lot to add a class to each one. I've been trying a few things such as

if(document.getElementsByTagName("CODE").style.display === "block"){
document.getElementsByTagName("CODE").style.display = "none"
}

and something around that, all similar code, but they all either made my browser crash or didn't work. My question is, is it really a MUST to use the class name and check for the class name of it's possible to pare, as i "did" above in the code here, the display content of all tags? ( maybe looping with a for loop each element, i tried that too, with no result. ) i tried every possible thing with my few knowledge so far ( im still studying javascript ). I would really like to know if i am trying to do something really advanced or i just dont see how it can be done.

Thanks, i hope there wasnt another question like this, i've read all of the ones suggested and none ( except one it said to use class ) was like this.

They all remend to add classes, so i feel like im trying to do something really impossible. Im not into jQuery yet, so dont talk about it please, thanks. ( first i must learn for good JavaScript )

I've read similar posts but i only found where it says to add class to the HTML to do what i want, so, basically i have a button, that when i want to click it hides ALL code HTML tags, and when i click it again it shows them. Since i have a lot of code tags in a page it would take me quite a lot to add a class to each one. I've been trying a few things such as

if(document.getElementsByTagName("CODE").style.display === "block"){
document.getElementsByTagName("CODE").style.display = "none"
}

and something around that, all similar code, but they all either made my browser crash or didn't work. My question is, is it really a MUST to use the class name and check for the class name of it's possible to pare, as i "did" above in the code here, the display content of all tags? ( maybe looping with a for loop each element, i tried that too, with no result. ) i tried every possible thing with my few knowledge so far ( im still studying javascript ). I would really like to know if i am trying to do something really advanced or i just dont see how it can be done.

Thanks, i hope there wasnt another question like this, i've read all of the ones suggested and none ( except one it said to use class ) was like this.

They all remend to add classes, so i feel like im trying to do something really impossible. Im not into jQuery yet, so dont talk about it please, thanks. ( first i must learn for good JavaScript )

• javascript
• toggle

• document.getElementsByTagName(), as the name of the function suggests, returns an array of elements, so you need to iterate through it to make checks and set values – ekstrakt Commented Jun 2, 2013 at 22:09

3 Answers 3

You have to iterate through the results of document.getElementsByTagName("CODE"), it is an array-like variable. It is a jQuery feature that lets you write .css() to a list of objects and have them all processed. You need something like

ar = document.getElementsByTagName("code");
for (i = 0; i < ar.length; ++i)
   ar[i].style.display = "none";

If you need to toggle code visibility, use this code

ar = document.getElementsByTagName("code"); 
for (i = 0; i < ar.length; ++i)
{ 
   if(ar[i].style.display != "none") //the element is visible
   {
      ar[i].style.display = "none";
   } 
   else
   {
      ar[i].style.display = "block"; //If you need to make it block explicitly, otherwise ""
   } 
} 

Note that the style.display property is initially empty and defaults to inline for code tag but can be set explicitly to other values. Resetting it to '' results in restoring the state.

If you need to change the visibility back and forth without the modification of display mode, you need to save the previous mode (code tags can be displayed not only in block mode). Can be done like this:

ar = document.getElementsByTagName("code"); 
for (i = 0; i < ar.length; ++i)
{ 
   if(ar[i].style.display != "none") //the element is visible, "" or "blocK" or some other value
   {
      ar[i].saved_display = ar[i].style.display; //Save the display mode to a new property of the tag
      ar[i].style.display = "none"; //And hide the element
   } 
   else
   {
      if (typeof ar[i].saved_display === "undefined") //It's the first time we see the element. Display it in default mode
         ar[i].style.display = "";
      else
         ar[i].style.display = ar[i].saved_display; //We know how the element was shown before we hid it, restoring
   } 
} 

As Aneri says, getElementsByTagName returns a NodeList that you can iterate over by index.

Note that the display property only has a value if it's been explicitly set, it does not inherit a value from CSS so you should do something like the following, which will hide all the CODE elements if their display hasn't been set to none and display them if it has:

var element, elements = document.getElementsByTagName("CODE");

for (var i=0, iLen=elements.length; i<iLen; i++) {
  element = elements[i];

  // If element hasn't been hidden, hide it
  if (element.style.display == '') {
    element.style.display = 'none';

  // Otherwise show it
  } else {
    element.style.display = '';
  }
}

Note that you should return the display value to "" (empty string) so that the elements return to their default or inherited value, which might not be "block".

Also, child elements will be hidden if their parent element has display: none.

You can add a class just to BODY or HTML element and attach needed styles to this class via e.g. context selectors. For example:

HTML.hide-code CODE {display: none; }