• This is more a javascript question than wordpress-specific but I am using javascript to display a very simple accordion style menu on a page. The most js I know is how to copy and paste so I’m wondering how to *not* display the first item in the list as expanded when the page initially loads. This is the code:

    // Hide dd only in DOM-capable browsers.
    if (document.getElementsByTagName) document.write("<style type='text/css'>@media screen{ dl.accordeon dd {display: none;} }</style>");
    
    var accordeonDL = {
     item : 0, // define the first displayed definition description
     setup : function(){
      if (!document.getElementsByTagName) return;
      var el = document.getElementsByTagName("DL");
      for (var i = 0; i < el.length; i++) {
       if (el[i].className.indexOf("accordeon") == -1) continue;
       accordeonDL.makeLinks(el[i]);
       // show  'item' on load
       var getDT = el[i].getElementsByTagName("DT")[accordeonDL.item];
       getDT.innerHTML = getDT.getElementsByTagName("A")[0].innerHTML;
       getDT.className = "accordeon-active";
       el[i].getElementsByTagName("DD")[accordeonDL.item].style.display = "block";
       }
     },
     makeLinks : function(dl){
      el = dl.getElementsByTagName("DT");
      for (var i = 0; i < el.length; i++) {
       if (!el[i].getElementsByTagName("A")[0]){
        el[i].innerHTML = "<a onclick='accordeonDL.showDD(this);' href='javascript:;'>" + el[i].innerHTML + "</a>";
        el[i].className = "";
        }
       }
     },
     showDD : function(a){
      dt = a.parentNode; dl = dt.parentNode; dd = dt.nextSibling;
      if (dd.nodeType != 1) dd = dd.nextSibling;
      el = dl.getElementsByTagName("DD")
      for (var i = 0; i < el.length; i++) {
       el[i].style.display = "none";
       }
      dd.style.display = "block";
      accordeonDL.makeLinks(dl);
      dt.innerHTML = a.innerHTML;
      dt.className = "accordeon-active";
     }
    }
     /* End Accordeon Definition List */
    
    //Onload Handling
    var oldonload=window.onload;if(typeof window.onload!='function'){
    window.onload=accordeonDL.setup;
    }else{window.onload=function(){oldonload();
    accordeonDL.setup();}}
      /* setup faster by deleting these lines and adding
             <script type="text/javascript">accordeonDL.setup();</script>
             before the closing body tag in your HTML */

    Please ignore the misspelling. It’s bothering me as well. I know that I need to either delete or change something in that first chunk but I don’t know what.

  • The topic ‘Accordion .js how-to *not* display the first item’ is closed to new replies.