homeホーム ＞HTMLに役立つヒント＞ JAVAスクリプトコレクション ＞ 文章を折りたたんだり表示したり

文章を折りたたんだり表示したり

　「しらぎく折り畳みスクリプト」に刺激され、もっとシンプルな折りたたみ方式を考えてみようと、やってみた。

　考え方は単純だ。文章の表示/非表示はCSSのdisplay指定で行う。JAVAscriptでこの指定の値を「none/block」に切り替えることで文章を見えるようにしたり折りたたんだりする。

　基本はこれだけ。では作ってみる。

　CSSを使って見えたり見えなかったりする部分を、あらかじめ「display:none;」として見えなくしておく。ここにはIDも仕込んでおく。IDはユニークなもの（他に同じものがないという意味）であればなんでもいいが、ここでは「SH-001」とした。

<div id="SH-001" style="display: none">

　　　ここに折りたたみたい文章を入れる。

</div>

　JAVAscriptの起動のために、ここでは「aタグ」を使うことにした（formのボタンでも同様のことができる）。下のように、「onClick」でJAVAscriptのfunction「showHide」を呼び出している。同時に、「showHide(ID番号)」とすることで、functionに処理して欲しいIDを引き渡している。

<a href="#" onClick="showHide('SH-001');return false;">続きを読む/たたむ</a>

　onClickの後に「return false;」を指定しているのは、aタグからonClickでJAVAscriptを呼び出すときの決まり文句みたいなもの。放っておくと、functionを実行した後リンク処理（aタグ）を実行しようとする。するとこのhtmlをもう一度読み込んじゃうので、いつまでたっても初期値である「display:none;」のままという事態に。なので、functionを実行した後、リンクへジャンプしないように処理を止める役割をしている。

　次は肝心のfunctionである。JAVAscriptを使って、クリックしたときに特定のidを持つ部分を「display:block;」と指定すれば見えるようになる。もう一度クリックして「display:none;」にしてしまえば見えなくなる。

　現在見えているかいないかは、そのIDの状態を調べればわかる。できあがったfunctionはこんな感じ。コメント（//〜）で解説を入れておいた。 

function showHide(targetID) { //functionの宣言。受けとったIDは変数targetIDに格納。
        if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する
                //指定されたIDのstyle.displayがnoneなら
                if( document.getElementById(targetID).style.display == "none") {
                    //blockに変更する
                    document.getElementById(targetID).style.display = "block";
                } else { //noneでなければ、つまりblockなら
                    //noneにする
                    document.getElementById(targetID).style.display = "none";
                }
        }
}

　以下が実際のサンプル。

（続きを読む/たたむ）

　（ここはIDの指定が間違っているので動作しない）

　↑この前に文章が折り畳まれている。が、aタグで指定しているのが「SH-003」であるのに、折り畳まれている部分が「SH-004」という存在しないIDなので、折り畳まれた部分はクリックしても表示されない。ソースを見るとよくわかる。

　こうした指定ミスがあった場合、「if( document.getElementById(targetID)) { //指定のIDのついたオブジェクトがあったら処理する」という部分がないと、処理が中断されず、このページが読み直されて全部たたまれてしまう。それを防いでいる判定部である。

　同じスクリプトでメニューの出し入れなんてこともできる。その場合はリンク部分をボタン風にしてあげると見た目もいいだろう。

homeホーム ＞HTMLに役立つヒント＞ JAVAスクリプトコレクション ＞ 文章を折りたたんだり表示したり