Accordion .js how-to *not* display the first item
-
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.