簡単なjQueryでtableにアコーディオンを実装する方法

f:id:vinton:20150615020659p:plain

jQueryを使ってテーブル内でアコーディオンするための方法をご紹介します。
開くボタンを押すと隠れていたコンテンツが開閉するようになっています。
テーブルをすっきり見せたいけど詳細なども表示させないといけないときのUIとして参考になるかもしれません。

Demo

はてなブログの料金表をサンプルとして使用しています。「＋」ボタンをクリックするとコース料金の詳細が表示されるようになっています。

f:id:vinton:20150615020812g:plain

HTML

「＋」ボタンと「－」ボタンを用意します。
「－」ボタン（.close）とコースの詳細部分（.course）はcssで表示させないようにしています。

<table>
<tbody>
<tr>
  <td class="border0"></td>
  <th class="free">はてなブログ</th>
  <th class="pro">はてなブログPro</th>
</tr>
<tr>
  <th>価格<a href="#" class="open">＋</a><a href="#" class="close">－</a></th>
  <td>無料</td>
  <td>600円 /月（税込）〜<br />
    ※2年コース加入時<br />
    <dl class="course">
      <dt>1ヶ月コース：</dt><dd>1,008円/月</dd>
      <dt>1年コース：</dt><dd>703円/月</dd>
      <dt>2年コース：</dt><dd>600円/月</dd>
   　</dl>
  </td>
</tr>
<tr>
  <th>複数ブログ</th>
  <td>最大3個</td>
  <td>最大10個</td>
</tr>
<tr>
  <th>アクセス解析</th>
  <td>簡易アクセス解析＋はてなカウンター</td>
  <td>簡易アクセス解析</td>
</tr>
<tr>
  <th>写真アップロード容量</th>
  <td>毎月3GBまで</td>
  <td>毎月30MBまで</td>
</tr>
</tbody>
</table>

CSS

table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 3px;
  color: #989898;
}
table th{
 width: 25%;
 padding: 10px;
 text-align: left;
 vertical-align: middle;
 background-color: #F7F7F7;
}
table td{
 padding: 10px;
 background-color: #F7F7F7;
}
.free {
  background: #29BA9B;
  color: #fff;
  text-align: center;
  border-radius: 4px 4px 0 0;
}
.pro {
  background: #50BA6F;
  color: #fff;
  text-align: center;
  border-radius: 4px 4px 0 0;
}
.border0 {
  border: none;
  background-color: #fff;
}
.course {
  display: none;
  border-top: 1px dotted #A6A6A6;
  padding-top: 10px;
}
.course dt {
  float: left;
  clear: right;
}
.course dd {float: right;}
.close {
 display: none;
}
.open,
.close {
  float: right;
  text-decoration: none;
  color: #fff;
  position:relative;
  background: #E2503C;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  text-align: center;
  line-height: 20px;
}

Javascript

「＋」ボタン（.open）をクリックするとコースの詳細（.course）が表示し、「＋」ボタン自体は非表示になり「－」ボタンが表示します
「－」ボタン（.close）をクリックするとコースの詳細（.course）が消え、「－」ボタン自体は非表示になり「＋」ボタンが表示します。

<script>
$(function() {
  $(".open").on("click", function() {
    $(this).parent('th').nextAll('td').find('.course').toggle();
    $(this).hide();
    $(this).next().show();
  });
  $(".close").on("click", function() {
    $(this).parent('th').nextAll('td').find('.course').toggle();
    $(this).hide();
    $(this).prev().show();
  });
});
</script>