FAQを作ってみたい　J Queryで挑戦

クリックすると、びろびろびろっと回答が出るFAQをJ Queryで作ってみました。

h2要素に質問文を書き、その次に回答用のDivを作りました。Divの中にはP要素でもリストでも何でも好きなものが入れられる予定です。で、方法としては、はじめはh2のみ表示してDivはすべて非表示。質問のh2をクリックすると、その次のDivのみ表示します。それから、別の質問をクリックすると、その前にクリックしたところの回答文は非表示になります。

で、クリックできることを知らせるために、h2にマウスが乗っかるとポインターの形になるようにしてあります。

HTML

<div id="faq">

  <h1>FAQ</h1>

  <p>ご質問はこちらをご覧ください。</p>

  <h2>1.なぜ、見習なんですか。</h2>

  <div><p>まだ若いからです。ぶひっ</p></div>

  <h2>2.見習が得意なことってありますか。</h2>

  <div><p>あ、ちょっと待っていただけますか。あれー、いったいなんだろう。あれあれあれ･･･。</p>
  <p>あの～、えっと、用件ってなんでしたっけ？</p></div>

  <h2>3.見習って、どう読むんですか。</h2>

  <div><p>けんしゅうって読みます。「一見の価値あり」の「けん」に「学習」の「しゅう」です。</p>
  <p>ですよね？あれ、字引がないかな？</p></div>

  <h2>4.見習とかけだしって、どう違うんですか。</h2>

  <div><p>えへへ。</p></div>

  <h2>5.いつまで見習やってるつもりですか。</h2>

  <div><p>がびょーん。</p></div></div>

CSS

*{

margin:0;

padding:0;

}

#faq {

width:80%;

margin:auto;

}

h1{

background-color:#09f;

color:#fff;

padding:5px;

margin-bottom:5px;

}

#faq div.closed{

display:none;

}

h2{

font-size:15px;

padding:5px;

border-bottom:#09f 1px dashed;

}

h2:hover{

cursor:pointer;

}

#faq div {

padding:10px 20px 0;

font-size:12px;

}

Java Script(J Query)

// JavaScript Document

  $(function(){

  var class_closed='closed';//　クラスclosedを使えるよう定義

  $('#faq').each(function(){

var faq_div=$(this);

var allH2=faq_div.find('h2');

var allDiv=faq_div.find('div');

function closeAll(){

allDiv.addClass(class_closed);

}

function openit(div){

div.removeClass(class_closed);

}

closeAll();//すべてを閉じる

allH2.click(function(){

var h2=$(this);

var div=h2.next();

closeAll();

openit(div);

});//クリックですべてを閉じて、クリックした次を開く

});//faq.each function終わり

})//1番目function終わり

▼サンプルはこちら

どうでしょう。それっぽいですよね？でも、2つ目以降の質問文をクリックしたとき、前の問題を非表示にしたほうがいいのか、表示したほうがいいのか、分からないです。って場合によるのでしょうか･･･。ということで、非表示にしないように、最後ですべてのDIVを閉じる動作をやめてみました。

// JavaScript Document

  $(function(){

  var class_closed='closed';//　クラスclosedを使えるよう定義

  $('#faq').each(function(){

var faq_div=$(this);

var allH2=faq_div.find('h2');

var allDiv=faq_div.find('div');

function closeAll(){

allDiv.addClass(class_closed);

}

function openit(div){

div.removeClass(class_closed);

}

closeAll();//すべてを閉じる

allH2.click(function(){

var h2=$(this);

var div=h2.next();

//closeAll();ここをコメントアウトすれば、次の質問文をクリックしても、前の回答文は非表示にならない

openit(div);

});//クリックした次を開く

});//faq.each function終わり

})//1番目function終わり

いひひ、なんとなく、それっぽくなってきて、うれしい見習です。うふふ。

2012年2月2日12:12 AM| カテゴリー： Java ScriptとJ Query,見習い奮闘記| コメント (0)