【コピペで簡単実装!】テーブルの一部をアコーディオンで開閉させる方法

web制作
記事内に広告が含まれています。

こんにちは、れももです。
先日案件対応で、「テーブルの一部をアコーディオンで開閉させる仕様にしたい」とご依頼がありまして、色々調べながら実装しました。
今回はその案件で実装したテーブルのアコーディオン開閉の実装方法についてご紹介しています。

コードの記述量も多くないため簡単に実装できます。コピペで実装できるようにまとめておりますので是非ご参考にしていただければと思います。

また、デザインのパターンとして別パターンもご紹介しておりますのでそちらもぜひご参考になれば幸いです^^

実際に実装したサイトは下記サイトになります!

【2024年最新】愛媛県松山市周辺の自動車教習所ランキング【おすすめ19選】
愛媛県松山市周辺の自動車教習所19校を徹底比較し、ランキング化。人気度の高い主要な自動車学校をスタッフの対応、教官の対応、教習の充実度、設備の充実度、通いやすさ、周辺環境、安さ、スピード取得、ユーザー評価、管理人評価という10つの項目で比較・ランキング化しています。
めろろ
めろろ

アコーディオンメニューはよく作るけどテーブルに適用するパターンってやったことないかも!
これはしっかり備忘録しておけば活用できそうだね!

実装方法

それではテーブルにアコーデオンメニュー実装してみます。
実装手順の流れはこちらです。

<実装手順>
①テーブルの準備【HTML/CSS】
②デフォルトで非表示にするテーブル行(<tr>)に専用クラスをつける【HTML】
③トリガーはボタンになるのでボタンにも専用クラス(あるいはID)をつける【HTML】
④ ②で専用クラスをつけた行をjQueryのhide()メソッドで非表示にする【jQuery】
⑤ ③のボタンをクリックしたら非表示の行をshow()メソッドで表示する【jQuery】
⑥表示/非表示の場合でボタンのテキストをtext()メソッドで変更する【jQuery】

①テーブルの準備【HTML/CSS】

テーブルのHTMLはこちらの通りです。
CSSでのスタイルの付け方は、実装にあまり影響しませんので今回は割愛しています。

<table">
    <tbody>
        <tr><th>順位</th><th>記事タイトル</th></tr>
        <tr><td>1</td><td><a href="#">【ランサーズ初受注】実績0件、レギュラーランクでも10人の中から選ばれました!</a></td></tr>
        <tr><td>2</td><td><a href="#">【独学の記録】勉強0日目〜7日目で学んだこと Progateやドットインストールで独学をはじめました</a></td></tr>
        <tr><td>3</td><td><a href="#">【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること前編」</a></td></tr>
        <tr><td>4</td><td><a href="#">【総額大発表!】4ヶ月のweb制作学習に費やしたお金計算してみた</a></td></tr>
        <tr><td>5</td><td><a href="#">【独学の記録】勉強8日目〜14日目 学んだこと 模写コーディングたくさんやりました</a></td></tr>
        <tr class="moreRead"><td>6</td><td><a href="#">ブログを始めたきっかけ</a></td></tr>
        <tr class="moreRead"><td>7</td><td><a href="#">【独学の記録】勉強15日目〜21日目 学んだこと デイトラ入会を決意しました!</a></td></tr>
        <tr class="moreRead"><td>8</td><td><a href="#">【コード1行でOK!】スマホで"送信ボタン"の見た目が変わってしまった時の対処法</a></td></tr>
        <tr class="moreRead"><td>9</td><td><a href="#">【4月度】フリーター1ヶ月目の業績振り返り ランサーズ活動とブログ運営の成果</a></td></tr>
        <tr class="moreRead"><td>10</td><td><a href="#">【ペット紹介】独り暮らしですが家族がいます^^</a></td></tr>
    </tbody>
</table>
<div><a href="/" class="moreReadToggle">ランキングをすべて見る</a></div>
れもも
れもも

至って普通のテーブルのHTMLを書いているだけなのでここは特に大丈夫かなと思います。
クラス名については以降で説明します^^

②非表示にするテーブル行(<tr>)に専用クラスをつける【HTML】

続いて、今回は5位までをデフォルトで表示させておいて、6位以降は非表示にしたいので非表示にするテーブルの行(<tr>タグ)にクラス名をつけていきます。

クラス名は何でも良いですが、もっと見るボタンを押したら表示されるという意味で今回は「class=”moreRead”」としました。

③ボタンに専用クラス(あるいは専用ID)をつける【HTML】

次に、非表示にしたテーブル行はもっと見るボタンをクリックしたら表示されるしようとなります。
jQueryで「もっと見るボタンをクリックしたら、、、」というコードを書いていくため、こちらもボタン(<a>タグ)にわかりやすいクラス名をつけておきましょう。

今回は非表示を表示に切り替えるトリガーボタンという意味で「class=”moreReadToggle”」というクラス名にしました。
こちらもクラス名は何でも良いです。IDでもOK!

めろろ
めろろ

HTMLはそんなに難しくないね👌

④hide()メソッドで非表示にする【jQuery】

テーブルの見た目ができたところで、あとはクリックしたら表示されるようにjQueryで動きをつけていきます。

いったん今回書いたjQueryを全部貼ります。説明は一つずつ順を追って説明します!

$(document).ready(function() {
  $(".moreRead").hide();
  $(".moreReadToggle").click(function(e) {
    var elem = $(".moreRead")[0];
    if(elem.style.display == 'none')
    $(".moreRead").show();
    else
    $(".moreRead").hide();
    e.preventDefault();
		  if ($(this).text() === 'ランキングをすべて見る') {
   		 $(this).text('閉じる');
		  } else {
    	$(this).text('ランキングをすべて見る');
  		}
  });
});

まず初めは「moreReadクラス」をつけた行を非表示にしたいので「hide()」メソッドを用いて非表示にします。

//2行目
  $(".moreRead").hide();

⑤非表示の行をshow()メソッドで表示する【jQuery】

続いて、もっと見るボタンをクリックしたら非表示にした「moreReadクラス」がついた行を表示させます。
クリックイベントを記述し、「moreReadクラス」を「show()」メソッドで表示します。

  //3〜9行目
  $(".moreReadToggle").click(function(e) {  //もっと見るボタンをクリックした時
    var elem = $(".moreRead")[0];  //変数定義
    if(elem.style.display == 'none')  //moreReadクラスがdisplay: none;だったら
    $(".moreRead").show();  //moreReadクラスを表示する
    else.  //display: none;ではなかったら
    $(".moreRead").hide();  //moreReadクラスを非表示にする
    e.preventDefault();

上記のように記述をすれば、もっと見るボタンを押したときに6位〜10位の行が非表示(display: none;)だった場合”表示する”6位〜10位が表示されている(display: none;ではない)場合”非表示にする”という指定ができます。

★クリックイベントの無効化
もっと見るボタンは<a>タグのため、クリックイベントでリンク先へ遷移してしまうので、これを無効化するために「e.preventDefault();」を忘れずに記述しましょう。
この時「.click(function(e) {」というように「.click(function() {」の括弧内に「e」を入力することを忘れないようにしてください!

これで<a>タグのリンク効果は無効になりました👍

【JavaScript】aタグでの画面遷移をキャンセルする方法
久しぶり?なJavaScriptについての私用備忘録。 今回は、HTMLのaタグをクリックした際に、画面遷移をさせない方法についてです。 例えば、下記のように指定していた場合に使え

⑥ボタンのテキストをtext()メソッドで変更する【jQuery】

最後に、このままでは1回もっと見るボタンを押すと6位〜10位までちゃんと表示されますが、もっとみるボタンのテキストが「もっとみる」のままになってしまっています
もう開いた表は閉じれる仕様にもしたいので、開いた時はテキストを「閉じる」に変えてあげるとわかりやすいですね。

if ($(this).text() === 'ランキングをすべて見る') {
   $(this).text('閉じる');
} else {
   $(this).text('ランキングをすべて見る');
}

上記のコードを記述してあげればテキスト表示が切り替わるようになります。
もっとみるボタンをクリックした時にボタンのテキストが「ランキングをすべて見る」だったら「閉じる」に書き換える、クリックした時にボタンのテキストが「ランキングをすべて見る」じゃなかったら「ランキングをすべて見る」に書き換えるといった指示になります。

jQueryを使ってボタンをクリックする度に要素のテキストを切り替える方法 | TechMemo
jQueryを使って、ボタンをクリックする度に要素の中のテキストを切り替える方法をご紹介いたします。 例えば、「開く」と書かれたボタンをクリックすると、テキストを「閉じる」に切り替えたい時などに便利です。 jQueryを使ってボタンをクリッ

補足:ready()メソッドについて

今回記述したjQueryにはready()メソッドを用いています。
これは簡単にいうとHTML構造が完全に読み込まれてから処理を実行してくださいという指示になります。
これについての解説は下記記事が大変わかりやすかったので参考にしてみてください。

【jQuery入門】ready(load)の使い方とHTMLの読み込み方法! | 侍エンジニアブログ
この記事では「 【jQuery入門】ready(load)の使い方とHTMLの読み込み方法! 」といった内容について、誰でも理解できるように解説します。この記事を読めば、あなたの悩みが解決するだけじゃなく、新たな気付きも発見できることでしょう。お悩みの方はぜひご一読ください。
めろろ
めろろ

わからないことは一つ一つクリアにしていくのが大事だね!

完成コード

<table">
    <tbody>
        <tr><th>順位</th><th>記事タイトル</th></tr>
        <tr><td>1</td><td><a href="#">【ランサーズ初受注】実績0件、レギュラーランクでも10人の中から選ばれました!</a></td></tr>
        <tr><td>2</td><td><a href="#">【独学の記録】勉強0日目〜7日目で学んだこと Progateやドットインストールで独学をはじめました</a></td></tr>
        <tr><td>3</td><td><a href="#">【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること前編」</a></td></tr>
        <tr><td>4</td><td><a href="#">【総額大発表!】4ヶ月のweb制作学習に費やしたお金計算してみた</a></td></tr>
        <tr><td>5</td><td><a href="#">【独学の記録】勉強8日目〜14日目 学んだこと 模写コーディングたくさんやりました</a></td></tr>
        <tr class="moreRead"><td>6</td><td><a href="#">ブログを始めたきっかけ</a></td></tr>
        <tr class="moreRead"><td>7</td><td><a href="#">【独学の記録】勉強15日目〜21日目 学んだこと デイトラ入会を決意しました!</a></td></tr>
        <tr class="moreRead"><td>8</td><td><a href="#">【コード1行でOK!】スマホで"送信ボタン"の見た目が変わってしまった時の対処法</a></td></tr>
        <tr class="moreRead"><td>9</td><td><a href="#">【4月度】フリーター1ヶ月目の業績振り返り ランサーズ活動とブログ運営の成果</a></td></tr>
        <tr class="moreRead"><td>10</td><td><a href="#">【ペット紹介】独り暮らしですが家族がいます^^</a></td></tr>
    </tbody>
</table>
<div><a href="/" class="moreReadToggle">ランキングをすべて見る</a></div>
$(document).ready(function() {
  $(".moreRead").hide();
  $(".moreReadToggle").click(function(e) {
    var elem = $(".moreRead")[0];
    if(elem.style.display == 'none')
    $(".moreRead").show();
    else
    $(".moreRead").hide();
    e.preventDefault();
		  if ($(this).text() === 'ランキングをすべて見る') {
   		 $(this).text('閉じる');
		  } else {
    	$(this).text('ランキングをすべて見る');
  		}
  });
});
jQueryでtableのtrタグごとに折りたたみ表示する方法 - cocowa
今、開発しているWebシステムでtableのtrタグごとに折りたたいところがありました。 すぐにできるだろうと思っていましたが、これが思いの外苦労して、なんとか出来たというのが率直な感想です。 こういうやり方をするケース…

よくあるデザインパターン

今回は下記demoのようなデザインパターンもおまけでご紹介します^^

コンテンツ部分がグラデーションで消えてボタンが設置されているよく見るデザインですね!

めろろ
めろろ

こっちの方がパッと見て「続きがあるんだ」ってわかりやすいね!

下記にコードと簡単な解説を載せていますのでご参考にしてみて下さい。
参考にした記事も下記にリンク貼っておいたのでこちらも合わせてどうぞ^^
※CSSの当て方を参考にしたくらいでjQueryは先ほどとほぼ一緒です
だいぶ自分なりにアレンジしているので分かりにくかったらすみませんm(_ _)m

本文がグラデーションで消える、続きを読むボタンの作り方
画像のような本文の冒頭は見えているけど、後半はグラデーションで消えているような「続きを読む」ボタンの作り方です。

HTML

<div class="table_wrapper">
<table class="table-primary2">
<tbody>
<tr><th>順位</th><th>記事タイトル</th></tr>
<tr><td>1</td><td><a href="https://lemolog.lemomo-works.com/post-696/">【ランサーズ初受注】実績0件、レギュラーランクでも10人の中から選ばれました!</a></td></tr>
<tr><td>2</td><td><a href="https://lemolog.lemomo-works.com/?p=384">【独学の記録】勉強0日目〜7日目で学んだこと Progateやドットインストールで独学をはじめました</a></td></tr>
<tr><td>3</td><td><a href="https://lemolog.lemomo-works.com/post-853/">【デイトラ実務編 学習記録】Gulpを使ってみよう 「Gulpでできること前編」</a></td></tr>
<tr><td>4</td><td><a href="https://lemolog.lemomo-works.com/post-884/">【総額大発表!】4ヶ月のweb制作学習に費やしたお金計算してみた</a></td></tr>
<tr><td>5</td><td><a href="https://lemolog.lemomo-works.com/post-414/">【独学の記録】勉強8日目〜14日目 学んだこと 模写コーディングたくさんやりました</a></td></tr>
<tr class="moreRead2"><td>6</td><td><a href="https://lemolog.lemomo-works.com/post-142/">ブログを始めたきっかけ</a></td></tr>
<tr class="moreRead2"><td>7</td><td><a href="https://lemolog.lemomo-works.com/post-589/">【独学の記録】勉強15日目〜21日目 学んだこと デイトラ入会を決意しました!</a></td></tr>
<tr class="moreRead2"><td>8</td><td><a href="https://lemolog.lemomo-works.com/post-42/">【コード1行でOK!】スマホで"送信ボタン"の見た目が変わってしまった時の対処法</a></td></tr>
<tr class="moreRead2"><td>9</td><td><a href="https://lemolog.lemomo-works.com/post-1235/">【4月度】フリーター1ヶ月目の業績振り返り ランサーズ活動とブログ運営の成果</a></td></tr>
<tr class="moreRead2"><td>10</td><td><a href="https://lemolog.lemomo-works.com/post-532/?_thumbnail_id=536">【ペット紹介】独り暮らしですが家族がいます^^</a></td></tr>
</tbody>
</table>
<div class="more-btn"><a href="/" class="moreReadToggle2">+ランキングをすべて見る</a></div>
</div>
  • 「table_wrapper」クラスでテーブルとボタンを囲むdivタグを追記

CSS

/*テーブルカスタマイズ*/
.post-1425 table {
	background-color: #FD35;
	margin-bottom: 0;
}
.post-1425 table th {
	background-color: #C99618;
	color: #FFF;
	text-align: center;
}
.post-1425 table td:first-child {
	text-align: center;
	width: 60px;
}
.table_wrapper {
  position: relative;
}
.moreReadToggle2 {
  position: absolute;
  bottom: -10px;
  left: 0px;
  color: #FFF;
  text-decoration: none;
  width: 100%;
  padding-top: 30px;
  padding-bottom: 10px;
  text-align: center;
  transition: display .3s, color .3s;
  background: linear-gradient(
    180deg,
    rgb(255, 255, 255, 0) 0%,
    rgb(255, 211, 92, 1) 70%
  );
}
.moreReadToggle2.active {
  background: #FFD35C;
  color: #333;
  padding-top: 0;
  padding-bottom: 0;
  position: relative;
  text-align: center;
  width: 100%;
  display: block;
  transition: display .3s;
  bottom: 0;
}
.moreReadToggle2:hover {
  color: #333;
}
  • table_classにposition: relative;追記(ボタンの配置用)
  • ボタンはposition: absolute;で配置調整
  • linear-gradientを用いてグラデーションでボタン背景色をつけることでコンテンツがグラデーションで消えていくようにデザイン。
    ※padding-topの値を調整すれば良い感じになります
  • ボタンが開いた時はグラデーションを消したいのでactiveクラスがついた時のCSSを準備。ボタン配置もposition: absolute;になっているのでrelativeに戻して表を開いた時も配置が良い感じになるようにしています。

jQuery

$(document).ready(function() {
  $(".moreRead2").hide();
  $(".moreReadToggle2").click(function(e) {
    var elem2 = $(".moreRead2")[0];
    if(elem2.style.display == 'none')
    $(".moreRead2").show();
    else
    $(".moreRead2").hide();
    e.preventDefault();
    if ($(this).text() === '+ランキングをすべて見る') {
      $(this).text('閉じる').addClass('active');
    } else {
      $(this).text('+ランキングをすべて見る').removeClass('active');
    }
  });
});
  • ボタンが開いた時にactiveクラスをつけるよう11行目のコードを追記
  • ボタンを閉じた時にactiveクラスを外すよう13行目のコード追記

まとめ

今回はLP制作で結構多用しそうな実装だったので備忘録としてまとめてみました。
サイトをコンパクトに見せる上でアコーディオンメニューは非常に有効的ですし、今回のようにテーブルと組み合わせれば使える場面もかなり広がると思います。

ポートフォリオなんかにも簡単に使えそうな実装ですのでぜひ使ってみてください!

コメント

タイトルとURLをコピーしました