jQuery UI アコーディオンパネルの組み込み

<実装方法>

1.組み込んだHTML

<h2>しつもん!ドラえもん (出典:朝日新聞)</h2>
<div id="accordion">
  <div>
    <h3><a href="#">江戸時代、日本人が海外に行ったり貿易したりすることは制限されていた。何という?</a></h3>
    <div>答え:鎖国<br>
キリスト教が広がるのを防ぎ、幕府が貿易の利益を独りじめするのが目的。貿易に窓口を長崎に限定し、中国とオランダの船以外は認めなかったんだ。
    </div>
  </div>
  <div>
    <h3><a href="#">アメリカでは、外務大臣にあたる役職を独特の名前で呼ぶ。なんというかな?</a></h3>
    <div>答え:国務長官<br>
アメリカは50の州が集まった国で、州ごとの仕事多い。国全体の仕事という意味の「国務」は限られていて、その代表的な仕事が外交なんだ。
    </div>
  </div>
  <div>
    <h3><a href="#">イタリア語の「小さく」という言葉が名前になっている、学校に必ずある楽器は何かな。</a></h3>
    <div>答え:ピアノ<br>
正式にはピアノフォルテという。それまでの鍵盤楽器とは違って大きな音(フォルテ)も小さな音(ピアノ)も出せ、表現がはるかに豊かになったんだ。
    </div>
  </div>
  <div>
    <h3><a href="#">バイオリンを弾く弓は、ある動物のしっぽの毛でできているんだよ。何の動物かな。</a></h3>
    <div>答え:馬<br>
狩に使う弓がもとになっているんだ。弓1本あたり、約150本の毛が使われている。弦は昔は羊の腸で、今は金属のスチールなどが使われているよ。
    </div>
  </div>
  <div>
    <h3><a href="#">近ごろは総理大臣がよくかわるけど、今までで一番長く総理大臣をつづけたのはだれかな。</a></h3>
    <div>答え:佐藤栄作<br>
1964年11月から7年8カ月、2798日務めた。連続でなければ桂太郎の2886日。3度も総理大臣になったんだ。
    </div>
  </div>
  <div>
    <h3><a href="#">「真っ赤なうそ」というよね。どうして青や白じゃなくて「赤」なのかな? </a></h3>
    <div>答え:「明らかな」という意味があるから<br>
赤は「明るい」と同じ仲間のことばで、そこから物事がはっきりしている意味も生まれた。「黒」は「暗い」ともとは同じだよ。
    </div>
  </div>
</div>

2.組み込んだjQuery

jQuery(function(){
    jQuery('#accordion').accordion({ header:'h3' },
                              { active:100},
                              { animated:'slide' },
                              { event:'click' },
                              { collapsible:true } ); 
});

3.組み込んだcss

div#accordion div {
       background-color:#f0ffff !important;
       margin-top:-3px;
       margin-bottom:-17px;
}
#accordion h3 {
       font-size:14px;
}