アコーディオン化メモ

アコーディオン化

ケース１：リストに無理やりボタンをつけて、アコーディオン化する

HTML

<dl class="list_detail">
  <dt>タイトル１</dt>
  <dd>説明１</dd>
  <dt>タイトル２</dt>
  <dd>説明２</dd>
</dl>

javascript

// アコーディオンの開閉ボタンを追加
$('.list_detail').before('<div class="btn_accordion btn_module deepBlueBtn">開く</div>');

// リストをアコーディオン化
$(function(){
  $("div.btn_accordion").on("click", function() {
    $('.list_detail').slideToggle(
      500,
      function(){
        // ボタンの文字を入れ替え
        var text = $('div.btn_accordion').text();
        if(text == '開く'){
          $('div.btn_accordion').text('閉じる');
        }else{
          $('div.btn_accordion').text('開く');
        }
      }
    );
  });
});

CSS

/* アコーディオンを閉じておく */
.list_detail {
  display:none;
}

/* ボタンにする */
.deepBlueBtn {
    font-size: 13px;
    color: #fff!important;
    background: rgb(102,141,185);
    background: -moz-linear-gradient(top, rgba(102,141,185,1) 0%, rgba(67,114,168,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(102,141,185,1)), color-stop(100%,rgba(67,114,168,1)));
    background: -webkit-linear-gradient(top, rgba(102,141,185,1) 0%,rgba(67,114,168,1) 100%);
    background: -o-linear-gradient(top, rgba(102,141,185,1) 0%,rgba(67,114,168,1) 100%);
    background: -ms-linear-gradient(top, rgba(102,141,185,1) 0%,rgba(67,114,168,1) 100%);
    background: linear-gradient(to bottom, rgba(102,141,185,1) 0%,rgba(67,114,168,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#668db9', endColorstr='#4372a8',GradientType=0 );
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

.btn_module {
    text-align: center;
    padding: 15px 5px;
    display: block;
}