テクノロジー観測所

ブログやウェブサイトを作る時にちょっと工夫することで見栄えを保ったまま見る人の利便性を高めておくと親切です。

たとえば一応追記しておきたいけど全員が全員読む必要のないような補足事項は「クリックすると展開」するようにして折りたたむことで、ページが長くなってしまうのを防ぎます。

そこで折りたたみを実現するコードをご紹介します。HTMLエディタにコピペするだけで使えるので、WordPressじゃなくても大丈夫です。

折りたたみボタンの作り方

<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 折りたたみボタンの名前</a>
</div>
<div id="open" style="display:none;clear:both;">

<!-- ここにコンテンツを記述する -->

</div>

 
コード内の <!– ここにコンテンツを記述する –> の部分を消して、中に入れたいものを記載します。

ボタンを見やすくカスタマイズ

ボタンに使用する<a>タグにCSSを適用することで見た目もカスタマイズできます。

<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;" class="sample01"><span style="color:#fff;">▼ 折りたたみボタンの名前</span></a>
</div>
<div id="open" style="display:none;clear:both;">

<!-- ここにコンテンツを記述する -->

</div>

a.sample01 {
  color: #fff;
  background: #333;
  box-shadow: 1px 1px 1px #555;
}

折りたたみボタンを複数置く場合

悪い例：

 
このように、ただ設置しただけではどのボタンを押しても最初（1番目）の折りたたみエリアが展開されてしまうことになります。

良い例：

 
折りたたみボタンを複数設置したい時は、コードの識別子をユニークなものにする必要があります。

<div onclick="obj=document.getElementById('open').style; obj.display=(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ 折りたたみエリア①のボタン名</a>
</div>
<div id="open" style="display:none;clear:both;">

<!-- ここにコンテンツを記述する -->

</div>

赤い部分を設置する折りたたみボタンそれぞれで異なるものにする必要があります。open2とかopen3とかでokです。

注意点としては、 obj=document.getElementById に指定した識別子と、その下の div id に指定する識別子は同じものにする必要があります。

「このボタンの識別子はこのエリアを展開するものだ」という区別をするためです。