[Web作成] メニューの展開と折りたたみ : すべて展開とすべて折りたたみ

2010年3月11日の「メニューの展開と折りたたみ」記事のコメント欄で、「すべて展開」と「すべて折りたたみ」を実現する方法の質問がありましたので、前回のソースコードに追加する形で作ってみました。
.oO( ・・・といっても、クリック時にクラス名を一括置換してるだけですが。 )

---

・すべて展開

・すべて折りたたむ

メニュー1

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

メニュー2

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

メニュー3

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

---

前回のソースに追記したソースコードは、次の通り。

■javascript

function doReplaceClassName(findClassName, replaceClassName, targetTagName){
  var elements = document.getElementsByTagName(targetTagName || '*');
  for (var i = 0; i < elements.length; i++) {
    if (elements[i].className == findClassName)
      elements[i].className = replaceClassName;
  }
}

■style

.vmenu_all_action {margin:2px 0px;}
.vmenu_all_action span {cursor:pointer; font-size:12px; color:#700; font-weight:bold; margin:2px 0px;}
.vmenu_all_action span:hover {color:#C00;}

■html

<div class="vmenu_all_action"><span onclick="doReplaceClassName('vmenu_off', 'vmenu_on')">・すべて展開</span></div>
<div class="vmenu_all_action"><span onclick="doReplaceClassName('vmenu_on',  'vmenu_off')">・すべて折りたたむ</span></div>

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

---

「アコーディオンメニュー」へ続く。

---

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