ウェブ学のすすめ

Study of Web Design & Programing

簡単な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>

今回使用したjQueryメソッド

.parent()

指定した要素の各親要素を取得します。セレクタによって絞り込むことも可能です。

.nextAll()

指定した要素のすべての兄弟要素を取得します。セレクタによって絞り込むことも可能です。

.find()

指定した要素の子孫要素でセレクタにマッチする要素を取得します。

.toggle()

マッチした要素の表示・非表示

.hide()

マッチした要素の非表示

.show()

マッチした要素の表示

.next()

マッチした要素の各要素の直後の兄弟要素を取得します。セレクタが指定されている場合、そのセレクタに一致する場合にのみ、次の兄弟要素を取得します。

.prev()

マッチした要素の各要素の直前の兄弟要素を取得します。

オススメの本

jQuery最高の教科書

jQuery最高の教科書

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)