アコーディオンパネル使い方

#アコーディオンパネル

html

<dl class="accordion">
    <dt>A</dt>
    <dd class="dda">ここにAの内容が入る</dd>
    <dt>B</dt>
    <dd class="ddb">ここにBの内容が入る</dd>
    <dt>C</dt>
    <dd class="ddc">ここにCの内容が入る</dd>
  </dl>

css

    .accordion{
      width: 500px;
      margin: 50px auto;
      text-align: center;
    }
      dt {
        padding: 16px;
        background: #2894f0;
        border: 2px solid #2894f0;
        color: #ffffff;
        font-size: 24px;
      }
      dd {
        height: 100px;
        padding: 16px;
        border: 2px solid #2894f0;
        border-top: 0;
      }

js

$(function() {
      $('dd').hide();
      $('dt').on('click',function() {
        $('.dda').slideDown(400);
      });
    });