클릭하면 펼쳐지는 토글 메뉴

왼쪽 네비나 FAQ에 쓰면 좋은 스크립트.

<script type="text/javascript">
/* definition list toggle */
function initToggle(tabContainer) {
 triggers = tabContainer.getElementsByTagName("a");

 for(i = 0; i < triggers.length; i++) {
  if (triggers.item(i).href.split("#")[1])
   triggers.item(i).targetEl = document.getElementById(triggers.item(i).href.split("#")[1]);

  if (!triggers.item(i).targetEl)
   continue;

  triggers.item(i).targetEl.style.display = "none";
  triggers.item(i).onclick = function () {
   if (tabContainer.current == this) {
    this.targetEl.style.display = "none";
    tabContainer.current = null;
   } else {
    if (tabContainer.current) {
     tabContainer.current.targetEl.style.display = "none";
    }
    this.targetEl.style.display = "block";
    tabContainer.current = this;
   }
   return false;
  }
 }
}
</script>


<dl id="navi">
<dt class="firstMenu"><a href="#answer1" >대메뉴</a></dt>
<dd  id="answer1">
 <ul>
    <li><a href="#">중메뉴</a></li>
    <li><a href="#">소메뉴</a></li>
    <li><a href="#">세메뉴</a></li>
    </ul>
</dd>
<dt><a href="#answer2" >대메뉴</a></dt>
<dd  id="answer2">
 <ul>
    <li>중메뉴</li>
    <li>소메뉴</li>
    <li>세메뉴</li>
    </ul>
</dd>
<dt><a href="#answer3" >대메뉴</a></dt>
<dd  id="answer3">
 <ul>
    <li>중메뉴</li>
    <li>소메뉴</li>
    <li>세메뉴</li>
    </ul>
</dd>
</dl>
<script type="text/javascript">
initToggle(document.getElementById("navi"));
</script>