<p><span id="wrapper0">「全表示」</span></p>
<dl class="wrapper1">
<dt>Q.1:あなたのハンドルネームを教えてください。</dt>
<dd><p>DACです。デジタル-アナログ変換回路のDACではなく、アヒル(鶩、または家鴨)を何故か間違えて綴ったという(;´д`)トホホなルーツに拠ります。ネット上では20年以上使用しております。</p></dd>
<dt>質問質問質問</dt>
<dd><p>回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1回答段落1</p><p>回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2回答段落2</p></dd>
</dl>
//定義要素で幅と基本文字設定、以降wrapper1クラスでのみ動く
dl.wrapper1 {margin:0;padding:.5em;width:95%;background-color:#fff;font-size:1em;}
//dt要素で囲み、縮み表示時くっ付かないよう上部マージン1px
dl.wrapper1 dt {margin:1px 0 0 0;padding:.5em;font-weight:bold;background-color:#e0e0e0;font-size:1.1em;border:1px solid #333;}
//dd要素は内包するブロックの明示のため左ボーダーのみ使用
dl.wrapper1 dd {margin-bottom:0.8em;padding-top:.5em;padding-bottom:.5em;padding-top:2px;border-left:1px solid #333;}
//基本p要素で内容を記述
dl.wrapper1 p{padding-left:.5em;padding-top:.8em;padding-bottom:.3em;margin:0 0 0 .8em;font-size:.9em;clear:both}
//dd要素の冒頭に「ANSWER」を表示
dl.wrapper1 dd::before {content: "Answer";font-size:1.2em;padding:0.3em;color:#ffffff;background-color:#000000;margin-bottom:0.6em;padding-left:1em;padding-right:1em;font-family:Georgia, "Times New Roman", Times, serif;}
//全表示ボタン
#wrapper0{width:100px;font-size:1em;font-weight:bold;text-decoration:none;display:block;text-align:center;padding:4px 0 5px;color:#fff;background-color:#49a9d4;border-radius:5px;}

View Compiled
$(document).ready(function(){
  $('dl.wrapper1 dd').hide();
});
$(function(){
  $('dl.wrapper1 dt').hover(
    function() {
      $(this).next('dd').fadeIn(1000);
    }
  );
});
$(function(){
  $('#wrapper0').click(
    function() {
      $('dd').fadeIn(1000);
    }
  );
});
Rerun