WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

アコーディオンパネル

HTML

<dl>
  <dt>タイトル</dt>
  <dd class="news news__detail">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
  <dt>タイトル</dt>
  <dd class="news news__detail">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
  <dt>タイトル</dt>
  <dd class="news news__detail">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
  <dt>タイトル</dt>
  <dd class="news news__detail">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>
<dl>
  <dt>タイトル</dt>
  <dd class="news news__detail">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
</dl>

CSS

dd {
  overflow: hidden;
  height: 0;
}
dd p {
  margin: 56px 36px;
}

JS

$(function(){
  $('dt').on('click',function(){
    var currentNum = $('dt').index(this);
    if($('dl').eq(currentNum).hasClass('active')){
      $('dl').eq(currentNum).find('.news__detail').animate({'height':'0'});
      $('dl').eq(currentNum).removeClass('active');
    } else {
      var h = $('dl').eq(currentNum).find('.news__detail').find('p.text').height();
      h += 56*2;
      $('dl').eq(currentNum).find('.news__detail').animate({'height': h });
      $('dl').eq(currentNum).addClass('active');
    }
  });
});

以前書いた関連記事

mmmmofu.hatenablog.com