＜実装方法＞

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>
狩に使う弓がもとになっているんだ。弓１本あたり、約１５０本の毛が使われている。弦は昔は羊の腸で、今は金属のスチールなどが使われているよ。
    </div>
  </div>
  <div>
    <h3><a href="#">近ごろは総理大臣がよくかわるけど、今までで一番長く総理大臣をつづけたのはだれかな。</a></h3>
    <div>答え：佐藤栄作<br>
１９６４年１１月から７年８カ月、２７９８日務めた。連続でなければ桂太郎の２８８６日。３度も総理大臣になったんだ。
    </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;
}