Web制作

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

image

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

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

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

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

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

修正前はタブ3つの内容を併記するHTMLでしたが、タブを2つにするので、ブログ、お知らせを併記する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のスタイルです