Jimdoで（クリックした時にオープンする）テキストボックスを作る方法

例えば以下のようなFAQを作りたい人のための方法です。

質問がズラーッと並んでいる時に、アンカーポイント（<a name="NANCHARA">）を使って、回答のところまでスクロールさせるという方法もあるが、手間がかかる割には、あまりスマートな方法ではない。そこで質問をクリックした時に、その下に、回答がポッと表示出来るようにしてみた。この方法は、スタイルシートとJavaScriptを利用していて、やり方次第では、色々と応用が聴く。

この方法の特徴  

1. Javascriptは使用するけど　アンカー<A>は使用しない。
2. 意外と応用範囲が広いこと（もちろんJimdoでなくても使用できます）
3. 誰でも簡単に導入出来るだけでなく、一旦コピペしてしておけばどのページでも利用可能。
4. ソースコードがシンプルなのでわかりやすい。（手直しもしやすい！） 

以下のソースを、JIMDO管理画面の

設定　⇒　ヘッダ部分の設定に貼り付ける。

<style type="text/css">
.ch{cursor: hand;}

</style>

<script type="text/javascript">
<!--
function box_open(id){
        document.getElementById(id).style.display="block";
        document.getElementById(id+'open').style.display="none";
}

function box_close(id){
        document.getElementById(id).style.display="none";
        document.getElementById(id+'open').style.display="block";
}
-->
</script>

赤い部分が、スタイルシート。（これはカーソルがその範囲に差し掛かったら、hand（指マーク）に変換するというもの。

緑の部分が、JavaScriptで、ボックスを開いたり閉じたりするためのシンプルなスクリプトだ。
開くだけなら。

<script>
function box_open(id){document.getElementById(id).style.display="block";}
</script>

と、だけかくことも出来る。

いずれにしてもほそんするのはこれだけ。

一度保存しておけば、あらゆる所で応用が効くので、色々工夫して欲しい。

HTMLのソースの部分の説明

以下のソースをHTMLソース編集ボタンで実装する。

<div id="Q1open" class="ch" onclick="box_open('Q1')">
質問 
</div>

<div id="Q1" class="ch" style="display: none;" onclick="box_close('Q1')">
質問<br />回答
</div>

まず、このプログラムを使用する時に重要なのは、id="name"　と　id="name+open"というネーミングの規則だ。

【動作の説明】

id="name"の方だが、スタイルシート（style="display:none;"）で隠されている。

表示されているid="name+open" の側の『質問』という文字をクリックくすると、

onClick="box_open('name')"で、はじめに隠れているid="name"をのdisplay:noneを

display:block;に変更して表示させ、ついでに、id="nameopen"の部分を非表示にする。

次に、id="name"の側の『質問<br />回答』の側をクリックすると、

今度は、onClick="box_close('name')" で、id="nameopen" をdisplay:block;で表示させ

id="name"にdisplay:none;をセットして、非表示にさせる。

あまり難しく考えずに、nameの部分をパーツ毎に書き換えればそれだけで上手く行くはずだ。

※注意　name部分は、必ず半角英数で！