こんにちは、れももです。
先日案件対応で、「テーブルの一部をアコーディオンで開閉させる仕様にしたい」とご依頼がありまして、色々調べながら実装しました。
今回はその案件で実装したテーブルのアコーディオン開閉の実装方法についてご紹介しています。
コードの記述量も多くないため簡単に実装できます。コピペで実装できるようにまとめておりますので是非ご参考にしていただければと思います。
また、デザインのパターンとして別パターンもご紹介しておりますのでそちらもぜひご参考になれば幸いです＾＾
＜ご依頼内容＞
ランキングの表をデフォルトでは一部の表示にして、表下部のボタンをクリックすると全て表示される仕様にしてほしい。
＜実装デモ＞
実際に実装したサイトは下記サイトになります！
アコーディオンメニューはよく作るけどテーブルに適用するパターンってやったことないかも！
これはしっかり備忘録しておけば活用できそうだね！
実装方法
＜demo＞
それではテーブルにアコーデオンメニュー実装してみます。
実装手順の流れはこちらです。
①テーブルの準備【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="#">【コード１行で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;ではない)場合は”非表示にする”という指定ができます。
⑥ボタンのテキストをtext()メソッドで変更する【jQuery】
最後に、このままでは１回もっと見るボタンを押すと6位〜10位までちゃんと表示されますが、もっとみるボタンのテキストが「もっとみる」のままになってしまっています。
もう開いた表は閉じれる仕様にもしたいので、開いた時はテキストを「閉じる」に変えてあげるとわかりやすいですね。
if ($(this).text() === 'ランキングをすべて見る') {
$(this).text('閉じる');
} else {
$(this).text('ランキングをすべて見る');
}上記のコードを記述してあげればテキスト表示が切り替わるようになります。
もっとみるボタンをクリックした時にボタンのテキストが「ランキングをすべて見る」だったら「閉じる」に書き換える、クリックした時にボタンのテキストが「ランキングをすべて見る」じゃなかったら「ランキングをすべて見る」に書き換えるといった指示になります。
補足：ready()メソッドについて
今回記述したjQueryにはready()メソッドを用いています。
これは簡単にいうと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="#">【コード１行で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('ランキングをすべて見る');
}
});
});
よくあるデザインパターン
今回は下記demoのようなデザインパターンもおまけでご紹介します＾＾
＜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/">【コード１行で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>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;
}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');
}
});
});まとめ
今回はLP制作で結構多用しそうな実装だったので備忘録としてまとめてみました。
サイトをコンパクトに見せる上でアコーディオンメニューは非常に有効的ですし、今回のようにテーブルと組み合わせれば使える場面もかなり広がると思います。
ポートフォリオなんかにも簡単に使えそうな実装ですのでぜひ使ってみてください！
コメント