jQueryで、お知らせ一覧の一部を非表示にしてトグルボタンで表示する（slideToggle）

投稿者: ねこやま猫道Web関連
image

ウェブサイトで３つのタブを使って、ブログ記事一覧、新着お知らせ、古いお知らせを表示していましたが、スマートフォンで見た場合に３つのタブの横並びが窮屈な印象だったので、変更することにしました。変更ポイントは以下です。

  • タブを２つにする（ブログ、お知らせ）
  • お知らせタブに全てのお知らせを掲載する（ただし、ページロード時に表示されるのは、最新お知らせ、もっとみるボタン）
  • もっとみるボタンをクリックされた場合に、古いお知らせを全て表示する
  • 古いお知らせが表示されている場合は、ボタンの表記を「おりたたむ」にする

古いお知らせの表示、非表示はjQueryのslideToggleを使用しました。

修正したウェブページはこちら。
http://nekoyamanekomichi.com/#info_current

toggleは、表示状態にあるものを非表示にし、非表示状態にあるものは表示状態にしますが、slideToggleを使用して、要素がスライドダウンするような見せ方にしました。

修正前はタブ３つの内容を併記するHTMLでしたが、タブを２つにするので、ブログ、お知らせを併記するHTMLとし、お知らせのdivの中で、新しい内容、古い内容を記述するようにしました。

古い内容の記述の前に、「もっとみる」ボタンを表示させ（slideToggleというクラス）、その後に古い内容を表示（toggleというクラスを指定）しますが、初期状態では非表示とします（スクリプトでHTMLの読み込み終了時に、クラスtoggleをhide）。この状態が上の図になります。

「もっとみる」ボタンをクリックすることで古い内容を表示します（スクリプトslideToggleのクリックイベント）。この時、ボタンのテキストの切り替えも行っています（「もっとみる」、「おりたたむ」）。

HTML（修正前）

<div id=“blog”>
（ブログ記事一覧の内容）
</div>
<div id=“info_current”>
（最新お知らせの内容）
</div>
<div id=“info_past”>
（古いお知らせの内容）
</div>

HTML（修正後・太字が変更箇所）

<div id=“blog”>
（ブログ記事一覧の内容）
</div>
<div id=“info_current”>
（最新お知らせの内容）
<!– 最新お知らせのdiv中に古いお知らせを入れる –>
<div id=“info_past”>
<!– 古いお知らせの前に「もっとみる」ボタンを設置 –>
<a class=“slideToggle btn”>もっとみる</a>
<!– 古いお知らせの内容を表示、非表示するためdivで囲む –>
<div class=“toggle”>
（古いお知らせの内容）
</div>
</div>
</div>

JS

<script>
$(function () {
    // 初期設定
           $(’.toggle’).hide();

// お知らせのトグルボタンクリック時の処理
$(’.slideToggle’).click(function () {
$(’.toggle’).slideToggle();
var btnText = $(this).text();
if (btnText == ‘もっとみる’) {
$(this).text(‘おりたたむ’);
} else {
$(this).text(‘もっとみる’);
}
});
});
</script>

補足

  • 初期状態の要素の非表示は、スタイルで「display: none;」を指定することで行おうとしましたが、うまくいかなかったため（理由不明）hideメソッドを使用しました
  • ボタンテキストの表記の切り替えを、表示（非表示）の状態で判断しようと思い、toggleが「is.(’:visible’)」かを判定しましたがうまくいかなかったため、ボタンテキスト自体をみることにしました（あまりよい方法ではないです）
  • ボタンの見た目は、btnというクラスでスタイル付けしていますが、これは元々ウェブサイトで使っているフレームワークkube4.0.3のスタイルです