[Web作成] アコーディオンメニュー

2012年5月22日の「メニューの展開と折りたたみ : すべて展開とすべて折りたたみ」記事のコメント欄で、「展開した部分が他の部分を展開した際に自動で閉じるというようなことはできますでしょうか？」というリクエストに応えてみました。

実際の動作は次の通り。

---

メニュー1

• 項目1-1
• 項目1-2
• 項目1-3

メニュー2

• 項目2-1
• 項目2-2
• 項目2-3

メニュー3

• 項目3-1
• 項目3-2
• 項目3-3

---

※2010年3月11日の「メニューの展開と折りたたみ」のjavascript部に一部機能追加することで、アコーディオンメニューを実現。

修正箇所は、次の通り。

■修正前のソース(javascript部のみ)

function doToggleClassName(obj, onClassName, offClassName){
  obj.className = (obj.className != onClassName) ? onClassName : offClassName;
}

■修正後のソース(javascript部のみ)

function doToggleClassName(obj, onClassName, offClassName){
  obj.className = (obj.className != onClassName) ? onClassName : offClassName;
  var elements = document.getElementsByTagName(obj.tagName);
  for (var i = 0; i < elements.length; i++) {
    if ((elements[i] != obj) && (elements[i].className == onClassName))
      elements[i].className = offClassName;
  }
}

また実際に動作するhtmlファイルは次のURL先となります。
http://fjiblog.cocolog-nifty.com/html/fji_vertmenu_accordion.html (別ウィンドウ表示)

---

■過去記事
・2012年5月22日 (火) : すべて展開とすべて折りたたみ
・2010年3月11日 (木) : メニューの展開と折りたたみ