How to replace getElementById function call with getElementsByClassName

Question

I would like to use getElementsByClassName function call by CMS ( https://stackoverflow.com/a/1933623/1336540 ) for the function that makes lists collapsible and currently is written to work only with getElementById - http://acmeous.blogspot.com/2011/03/how-to-create-easy-collapsible-and.html

Because there can be several HTML elements with the same class, CMS is using cycle to find them and process. I was trying to adapt his code, but because of the cycle usage it is beyond my JS capabilities.

Original CMS function call:

function toggle_visibility(className) {
var elements = getElementsByClassName(document, className),
   n = elements.length;
for (var i = 0; i < n; i++) {
var e = elements[i];

if(e.style.display == 'block') {
   e.style.display = 'none';
 } else {
   e.style.display = 'block';
 }
}
}

How can I transform this function call to replace getElementById with CMSs getElementsByClassName?

if (window.addEventListener) {
   window.addEventListener("load", function()
   {makeCollapsible(document.getElementById('listCategories'), 1);}, false);
} else if (window.attachEvent) {
   window.attachEvent("onload", function()
   {makeCollapsible(document.getElementById('listCategories'), 1);});
} else {
   window.onload = function()
   {makeCollapsible(document.getElementById('listCategories'), 1);};
}

Thank you all for reading this and trying to help me!

Edit: function makeCollapsible:

function makeCollapsible(listElement,listState){
  if(listState!=null) defaultState=listState;

  // removed list item bullets and the sapce they occupy
  listElement.style.listStyle='none';
  listElement.style.marginLeft='0';
  listElement.style.paddingLeft='0';

  // loop over all child elements of the list
  var child=listElement.firstChild;
  while (child!=null){

    // only process li elements (and not text elements)
    if (child.nodeType==1){

      // build a list of child ol and ul elements and show/hide them
      var list=new Array();
      var grandchild=child.firstChild;
      while (grandchild!=null){
        if (grandchild.tagName=='OL' || grandchild.tagName=='UL'){
          if(defaultState==1) grandchild.style.display='block';
          else grandchild.style.display='none';
          list.push(grandchild);
        }
        grandchild=grandchild.nextSibling;
      }

      // add toggle buttons
      if(defaultState==1) {
          var node=document.createElement('img');
          node.setAttribute('src',expandedImage);
          node.setAttribute('class','collapsibleOpen');
          node.style.marginRight="5px";
          node.style.display = "inline";
          node.onclick=createToggleFunction(node,list);
          child.insertBefore(node,child.firstChild);
      } else {
          var node=document.createElement('img');
          node.setAttribute('src',collapsedImage);
          node.setAttribute('class','collapsibleClosed');
          node.style.marginRight="5px";
          node.style.display = "inline";
          node.onclick=createToggleFunction(node,list);
          child.insertBefore(node,child.firstChild);
  }
}

child=child.nextSibling;
  }

}

I would highly recommend that you switch to a framework like jQuery to make this easier, but also to ensure that what you are writing works across multiple browsers. For example, getElementsByClassName is not supported prior to IE9... — Prestaul, Apr 16 '12 at 16:07
@Prestaul I would really do this if i would have more experience with JS. That's why I was searching for the peace of code that I could use :/ — Tomas M., Apr 16 '12 at 16:13

score 0 · Answer 1 · edited Feb 16 '19 at 22:35

So, I guess you have a dom like this:

<ul id="listCategories">
     <li class="category"><!-- one collapsible list --></li>
     <li class="category"><!-- another collapsible list --></li>
     <li class="category">...
</ul>

and want to migrate from makeCollapsible(document.getElementById('listCategories'), 1) to makeCollapsible(getElementsByClassName(document, 'category'), 1)?

Then you will need to loop over the given nodelist, instead of the children of the given element:

function makeCollapsible(lists, listState){
    if (listState!=null) defaultState=listState;
    for (var i=0; i<lists.length; i++) {
        var child = lists[i];
        if (child.nodeType!=1) continue; // not really neded
        // and then build the list and add the buttons:
        var list=new Array();
        ...
        if(defaultState==1) {
            ...
        } else {
            ...
        }
    }
}

How to replace getElementById function call with getElementsByClassName

1 Answers1