ボタン1つで全リストを展開・縮小する

ボタン1つで全リストを展開・縮小するには、以下のようなJavaScriptソースをHTMLのhead要素内に記述しておきます。
<script type="text/javascript"><!--
function allshowhide( showhide ) {
   var TargetLabels = document.getElementsByClassName('menu');
   for (var i=0; i<TargetLabels.length; i++) {
      var TargetLists = TargetLabels[i].parentNode.getElementsByTagName('ul');
      TargetLists[0].style.display = showhide;
   }
}
// --></script>
この7行(scriptタグも含めると9行)で、全リストを展開・縮小できる「allshowhide」関数を作っています。特に書き換える必要なく、コピー&ペーストで使えますが、以下に簡単に内容を説明しておきます(読み飛ばしても構いません)。

●var TargetLabels = document.getElementsByClassName('menu');
「getElementsByClassName('menu')」で、「class属性の値が『menu』である全要素」を得ています。「class属性の値が『menu』である」要素というのは、ここでは「下層を展開・縮小するためのリンク」のことです。

※getElementsByClassNameメソッドは、例えばIE6のような古いブラウザでは利用できません。その対策として、getElementsByNameメソッドを使ってname属性の値で判別する方法を採用したサンプルも用意しました(後述)。

●for (var i=0; i<TargetLabels.length; i++) { ~ }
得られた「class属性の値が『menu』である全要素」1つ1つに対して処理を実行するループです。「TargetLabels.length」で該当要素の個数を得ています。

●var TargetLists = TargetLabels[i].parentNode.getElementsByTagName('ul');
ここで、対象要素と同じ階層にあるリスト(ul要素)を得ています。リストをul要素ではなくol要素で作った場合は、上記の「ul」部分を「ol」に修正する必要があります。

●TargetLists[0].style.display = showhide;
そのリストのdisplayプロパティに、関数の引数として与えた値(showhide)を格納しています。「none」を与えれば非表示になりますし、「block」を与えれば(ブロックレベル要素として)表示されます。

JavaScriptを実行するボタンを作る

このallshowhide関数を呼び出すHTMLソースは以下の通りです。input要素を使ってボタンを2つ作っています。
<input type="button" value="全部閉じる" onclick="allshowhide('none');">
<input type="button" value="全部展開" onclick="allshowhide('block');">
呼び出すallshowhide関数に、引数として、
  • 「none」を与えると、「リスト全部を非表示にする」(=全部閉じる)ボタン
  • 「block」を与えると、「リスト全部をブロックレベル要素として表示する」(=全部展開する)ボタン
になります。

初期状態で最上位の階層のみを表示する

ページを読み込んだ直後は「すべてのリストが畳まれた状態」にし、最上位の階層のみが見えるようにしておくと操作しやすいでしょう。そうするには、HTMLのbody要素の末尾あたり(少なくとも、全リストを記述し終えた後の位置)に、以下のように記述しておきます。
<script type="text/javascript"><!--
allshowhide('none');
// --></script>
ここで実行しているJavaScriptは、先ほど作成した「全部閉じる」ボタンと同じ内容です。ページを最後まで読み込んだ時点で、リストを全部閉じる処理を実行させています。

実際に動かせるサンプル

これまでにご紹介してきたソースをすべて使ったサンプルを以下に用意しました。実際にブラウザで表示させてみて下さい。これらのサンプルページからソースをコピー&ペーストすれば、楽に試せるでしょう。
リストを展開・縮小させる機能の部分は、どちらのサンプルでも同じです。ただ、すべてのリストを一括して展開・縮小させる機能の実現方法に違いがあります。

前者のサンプルAは、getElementsByClassNameメソッドを使用しているため、古いブラウザでは動きません。 後者のサンプルBは、a要素にname属性を追記することで、getElementsByNameメソッドを使えるようにしており、IE6のような古いブラウザでも動きます。

サイトマップなどに活用すると見やすくて便利

今回は、リストの項目をクリックすることで下層を展開・縮小できる機能の作り方をご紹介致しました。項目(ページ数)の多いサイトマップを分かりやすく見せる際などに、ぜひご活用下さい。


【関連記事】




投資未経験者限定で、オンラインインタビューを受けていただける方を募集中!
ご応募の際に事前に投資意向調査アンケートにご回答いただきます。
投資に興味がない方から興味がある方まで幅広く受け付けております。
※謝礼は10,000円になります(最大10名まで)

ご協力いただける方はこちらから回答をお願いいたします(回答期限は2021年3月1日15時まで)


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。