脱 jquery.accordion.js（jQuery）

こんにちは。まめちゃんです。
普段の作業メモとして掲載していますので、気に入ったものがあれば、是非使ってやってください。

今日はアコーディオンです。
いつもjquery.accordion.jsやtoggleSlideを使っているまめちゃんですが、それでは実装できないものにぶち当たったため、自分でjqueryを書いてみました。

普段使っている方法では
☆タイトルを表示して、コンテンツを隠すのはできる！
☆リストを表示して、●個目以降を隠してアコーディオンを作成できる！

しかし！！
キリの良いところでしか表示・非表示を設定できないのです。。。

ということで、作成したコードを。

<script>
$(function(){
   var target = $('.qa-list');
   var height = target.outerHeight() + 'px';
   target.addClass('close');
   $('.faq-open').click(function(){
      $(this).toggleClass('active');
      $(this).parent().parent().children(target).toggleClass('active');
      if ($(this).parent().parent().children(target).hasClass('active')) {
          $(this).parent().parent().children(target).css('height', height);
      } else {
          $(this).parent().parent().children(target).removeAttr('style');
      }
   });
});
</script>

<div class="faq-box">
   <p class="box-ttl">accordion.jsから脱却じゃ！</p>
   <ul class="qa-list">
       <li>
           <p class="ttl">質問が入ります。質問が入ります。質問が入ります。</p>
           <p class="txt">質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。</p>
       </li>
       .
       .
       .
       .
       <li>
       <li>
           <p class="ttl">質問が入ります。質問が入ります。質問が入ります。</p>
           <p class="txt">質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。質問への回答が入ります。</p>
       </li>
   </ul>
   <p class="center-btn"><button class="faq-open">もっと表示する</button></p>
</div>

簡単な説明/補足
・読み込み時にシャドウを付けてアコーディオンを設定したいリストの高さを取得し、その後リストをしまう。
・あとはtoggleClassでボタンの表示を操作して、ターゲットのcss調整。

手こずった点/問題点
・リスト表示の際にheight: auto;を指定してしまうと、transitionが効かない。
・レスポンシブには対応しているが、画面幅が動いてしまうとリロードする必要がある。

改善点等ある場合は、気軽にコメントください。

以上！