The finished accordion effect is as follows, see the code for details: html code Copy code The code is as follows: Accordion <br>#accordion{ <br>width:200px; <br>} <br>#accordion ul{ <br>list-style: none; <br>display:none; <br>} <br>.first-level{ <br>background-color: #d8d8d8; <br>background-color: rgba(236, 208, 208, 0.53); <br> border-radius: 4px; <br>display: block; <br>cursor: pointer; <br>position: relative; <br>margin: 2px 0 0 0; <br>padding: 8px; <br>min-height : 0; <br>} <br> level one first item second item< ;/li> third item level one first item second item level one first item second item third item <br>var heads = document.querySelectorAll(".first-level"); <br>function headClick(event){ <br>var target = EventUtil.getTarget(event); <br>toggleDisplay(target.parentNode.querySelector(" ul")); <br>} <br>for(var i=0;i<heads.length;i ){ <br>EventUtil.addHandler(heads[i], "click", headClick); <br> } <br><br>window.onunload = function (){ <br>for(var i=0;i<heads.length;i ){ <br>EventUtil.removeHandler(heads[i], "click", headClick); <br>} <br>heads = null; <br>} <br> </div> <br>common.js file<br><div class="codetitle"> <span><a style="CURSOR: pointer" data="49681" class="copybut" id="copybut49681" onclick="doCopy('code49681')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code49681"> <br>var EventUtil = { <br>addHandler : function (element, type, handler) { <br>if (element.addEventListener) { <br> element.addEventListener(type, handler, false); <br>} else if (element.attachEvent) { <br>element.attachEvent("on" type, handler); <br>} else { <br>element[" on" type] = handler; <br>} <br>}, <br>removeHandler : function (element, type, handler) { <br>if (element.removeEventListener) { <br>element.removeEventListener(type, handler , false); <br>} else if (element.detachEvent) { <br>element.detachEvent("on" type, handler); <br>} else { <br>element["on" type] = null; <br>} <br>}, <br>getEvent : function (event) { <br>return event || window.event; <br>}, <br>getTarget : function (event) { <br>return event .target || event.srcElement; <br>} <br>} <br><br><br>var getStyle = function (el, style) { <br>if (el.currentStyle) { <br>style = style.replace(/-(w)/g, function (all, letter) { <br>return letter.toUpperCase(); <br>}); <br>var value = el.currentStyle[style]; <br>return value; <br>} else { <br>return document.defaultView.getComputedStyle(el, null).getPropertyValue(style); <br>} <br>} <br><br><br>var toggleDisplay = function (element) { <br>var display = getStyle(element, "display"); <br>if (display == "none") { <br>element.style.display = "block"; <br>} else { <br>element.style.display = "none"; <br>} <br>} <br> </div>