アンカー付リンクから、スライドトグルさせる

もうちょっとタイトル分かりやすくならんかな、と思ったんですが諦めました。
Q&Aとかでよくある、質問行をクリックすると隠れていた回答ボックスが出てくるトグル関連の話です。
基本、cssは略してます。
↓こういう定義リストをトグルさせるのは簡単。

<dl class="qa">
  <dt>愛媛県の県庁所在地は？</dt>
  <dd>松山市</dd>
  <dt>愛媛県の県の花は？</dt>
  <dd>みかんの花</dd>
  <dt>愛媛県の県の木は？</dt>
  <dd>マツ</dd>
</dl>

<style type="text/css">
  dd{display:none;}
</style>

  $(function(){
    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });
  });

もう一歩進んで、質問へのアンカー付きリンクでページを開いたと同時に、回答部分を表示させる方法。
スムーススクロールさせたいなら、return falseの前に処理を書けばOK。

<dl class="qa">
  <dt id="qa_where">愛媛県の県庁所在地は？</dt>
  <dd>松山市</dd>
  <dt id="qa_flower">愛媛県の県の花は？</dt>
  <dd>みかんの花</dd>
  <dt id="qa_tree">愛媛県の県の木は？</dt>
  <dd>マツ</dd>
</dl>

<style type="text/css">
  dd{display:none;}
</style>

  $(function(){
    // URLのハッシュを取得
    var urlHash = location.hash;
    if(urlHash){
      $(urlHash).next('dd').slideToggle();
      return false;
    }

    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });
  });

ここからさらに進んで、質問部分をタブメニューっぽく横に並べて、スライドトグルするやつ。

<ul class="q">
  <li class="q_where">愛媛県の県庁所在地は？</li>
  <li class="q_flower">愛媛県の県の花は？</li>
  <li class="q_tree">愛媛県の県の木は？</li>
</ul>
<div class="a">
  <div id="qa_where"><p>松山市</p><p class="close">×</p></div>
  <div id="qa_flower"><p>みかんの花</p><p class="close">×</p></div>
  <div id="qa_tree"><p>マツ</p><p class="close">×</p></div>
</div>

<style type="text/css">
  .q li{
    float:left;
    width:200px;
    border:1px solid #ccc;
  }
  .a div{display:none;}
</style>

  $(function(){
    // アンカーリンクからスライドトグル。ついでにスムーススクロール  ---------
    // URLのハッシュを取得。
    var urlHash = location.hash;
    if(urlHash){
      $(urlHash).slideToggle();
      var href= urlHash;
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = target.offset().top;
      $('body,html').animate({scrollTop:position}, 1000, 'swing');
      return false;
    }

    $(".qa dt").on("click", function() {
      $(this).next('dd').slideToggle();
    });

    // 閉じるボタン  ----------------------------
    $(".close").on("click", function() {
      $(this).parent().slideToggle();
    });

    // メニューからスライドトグル  ---------------
    $(".q li").on("click", function() {
      // メニューのclassを取得し、余分をとる
      var q = $(this).attr("class").replace(/q_/g,'');

      // div総当たり
      $(".a div").each(function(i) {
        // divのidを取得し、余分をとる
        var qa = $(this).attr("id").replace(/qa_/g,'');
        // メニューとmatchしたらトグル
        if (qa .match(q)) {
            $(this).slideToggle();
        }else{
            $(this).hide();
        }
      });
    });
  });

別にタブでいいんじゃない？と思うでしょうが、色々理由があって画面稼ぎしないといけない、そんなニッチな仕様の時にどうぞｗｗ