ブログデザイン備忘録 ~展開・折り畳みの方法

1. 展開・折り畳み
2. 入力フォームの設置と関数定義
3. HTMLおよびjavascript
4. 展開・折り畳みの実装
5.まとめ

1. 展開・折り畳み

　今回は入力フォームを利用した展開・折り畳み表示の方法について紹介したい。入力フォームを設置、styleによるデザイン、javascriptを用いてCSSを用いることなく展開・折り畳み表示が可能になる。

atatat.hatenablog.com

2. 入力フォームの設置と関数定義

　クリックして展開・折り畳みをするには、ラベル、ボタン、チェックボックスの３つの入力フォームを設置する。チェックボックスはクリックしたときに、展開するか・折り畳むかを判定するために設置する。ボタンはjavascriptで定義する関数confirmChecked()を呼び出すために設置する。ラベルとボタンは連動させておき、ラベルの文字"クリックして"をクリックするとボタンが押され、ユーザ定義関数であるconfirmChecked()を呼び出す。confirmChecked()ではチェックボックスにチェックが入っていなければ、チェックボックスにチェックを入れ、あらかじめ非表示にしてある"test2"を表示し、同時に"test1"に"折りたたむ"と表示させる。またチェックボックスにチェックが入っていれば、チェックボックスにチェックをはずし、表示にしてある"test2"を非表示にし、同時に"test1"に"展開"と表示させる。

3. HTMLおよびjavascript

　具体的なHTML/javascriptのコードについて説明する。<label>のidを"testbtn"としてボタン側にも同じidを設定する。次にタグのidをtest1として、最初にロードしたときのために"展開" と表示しておく。ボタンの設定ではid="testbtn"として、イベントハンドラonclick="confirmChecked();"とすることでクリック時にconfirmChecked()呼び出すようにする。チェックボックスはname="chktest"としておく。最後に展開する文章を入れるタグに文章を入れて(ここに展開する文章を入れる)、id="test2 style="display:none;"としてidをtest2として表示を消しておく。

　次にjavascriptで関数confirmChecked()の動作を記述する。var boxes = document.getElementsByName("chktest");でチェックボックス(chktest)の状態を変数boxに格納する。boxes.item(0).checkedはチェックボックスにチェックが入っているかどうかをあらわし、if文によりチェックは入っていないfalseの場合、 boxes.item(0).checked = true;とすることでチェックを入れる。続いてtest2.style.display="block";とするとtest2に設定していたstyle="display:none;"→style="display:block;"に切り替わる。またdocument.getElementById("test1").textContent = "折りたたむ";とするとtest1のタグのテキスト部分に"折りたたむ"が挿入される。チェックが入っている場合の処理をelse{}内に同様の要領で記述する。

<label for="testbtn">クリックして</label>
<span id="test1">展開</span>
<input type="button" id="testbtn" onclick="confirmChecked();" value="ボタン" / >
<input type="checkbox" name="chktest" >チェック用

<span id="test2" style="display:none;">ここに展開する文章を入れる</span>

<script>
function confirmChecked()
{
    // チェックボックス要素を取得する
    var boxes = document.getElementsByName("chktest");
 
 
    if(boxes.item(0).checked==false){
        boxes.item(0).checked = true; 

        test2.style.display="block";
        document.getElementById("test1").textContent = "折りたたむ";
     }
    else{
     boxes.item(0).checked = false; 
     test2.style.display="none";    
     document.getElementById("test1").textContent = "展開"; 
}

}
</script>

↓以下クリックすれば、ボタンが押されると同時に、チェックが入り、隠されていた文章が表示され、展開→折りたたむに変化する。もう一度クリックすると、チェックがはずれて文章が隠され、折りたたむ→展開に変わる。

クリックして展開チェック用

ここに展開する文章を入れる

4. 展開・折り畳みの実装

　上のコードは、ボタンやチェックボックスの動作がわかるように敢えて表示させていた。実装する場合は、ボタンやチェックボックスを非表示にして、ユーザが文字をクリックすると動作するように見せる。（裏ではボタンとチェックボックスが機能している）非表示にするためには、ボタン、チェックボックスでstyle="display:none;"とする。HTML/javascripsのコードを下に示す。なお上の例とidはすべて変えている。

<label for="btn2">クリックして</label>
<span id="test3" style="content:'';">展開</span>
<input type="button" id="btn2" onclick="confirmChecked2();" value="" style="display:none;" >
<input type="checkbox" name="chktest2"  style="display:none;">

<span id="test4" style="display:none;">ここに展開する文章を入れる</span>

<script>
function confirmChecked2()
{
    // チェックボックス要素を取得する
    var boxes = document.getElementsByName("chktest2");
 
 
    if(boxes.item(0).checked==false){
        boxes.item(0).checked = true; 

        test4.style.display="block";
        document.getElementById("test3").textContent = "折りたたむ";
     }
    else{
     boxes.item(0).checked = false; 
     test4.style.display="none";    
     document.getElementById("test3").textContent = "展開"; 
}

}
</script>