[jQuery] クリックでセクションの表示・非表示を切り替える

2020-01-25JavaScriptjQuery

目次みたいなリンク一覧がって、リンクをクリックをすると、そのセクション（ブロック）だけが表示され、クリックするたびにセクションが切り替わるような画面を作ったのでメモ。

アプリ名一覧みたいなのがあって、アプリ名をクリックすると、そのアプリの紹介だけが表示されるようなやつ。

一覧が、リンクの場合と、ボタンの場合の 2 種類を作った。
リンクの場合は、 href の値と id で表示・非表示を切り替える。
ボタンの場合は、 id と class 名を使って切り替える。

セクションの切り替えは、
hide() で非表示
show() で表示、または
toggle() で表示（クリックするごとに表示・非表示を繰り返す）

表示・非表示のメソッドは、 fadeIn() / fadeOut() や slideDown() / slideUp() などアニメーション付きのもあるので、それらを使ってもいい。

リンクで切り替え

デモ

See the Pen section show/hide with link on Divi by AgoPeanuts (@AgoPeanuts) on CodePen.

HTML

<!-- List部分 -->
<div class="et_pb_module">
  <a href="#fuu" class='secList'>Section1</a>
</div>

<div class="et_pb_module">
  <a href="#euu" class='secList'>Section2</a>
</div>

<div class="et_pb_module">
  <a href="#guu" class='secList'>Section3</a>
</div>

<!-- Sections -->
<div id="fuu" class="section">
  <h2>Section1</h2>
  <p>hoge1</p>
</div>

<div id="euu" class="section">
  <h2>Section2</h2>
  <p>hoge2</p>
</div>

<div id="guu" class="section">
  <h2>Section3</h2>
  <p>hoge3</p>
</div>

a タグの href の値と、表示・非表示を切り替えるセクション (ここでは div )の id を同じにする。
セクション部分を作るタグは、 section タグとかでもいい。

各 a タグには同じクラス名をつけ、各セクションにもセクション用の同じクラス名をつける。

jQuery

$(function(){
  $('.section').hide();

  $('.secList').on('click',function(){
    $('.section').not($($(this).attr('href'))).hide();

    // フェードイン・アウトのアニメーション付で、表示・非表示を交互に実行する
    $($(this).attr('href')).fadeToggle(1000);

    // show を使うと、表示するだけ （ 同じボタンを何回押しても変わらない ）
    // $($(this).attr('href')).show();
  });
});

$('.section').hide(); で初期表示時は、セクションは全部非表示にする。

$('.section').not($($(this).attr('href'))).hide(); について、
$(this).attr('href') で取得できるのは a タグの href の値 ( #euu とか)。
.not を使ってクリックされた href の値と等しくない id の要素を取得し、非表示にしている。

ボタンで切り替え

デモ

See the Pen section show/hide by AgoPeanuts (@AgoPeanuts) on CodePen.

HTML

<!-- List -->
<div class="et_pb_module">
  <button id="fuu" class='secList'>Section1</button>
</div>

<div class="et_pb_module">
  <button id="euu" class='secList'>Section2</button>
</div>

<div class="et_pb_module">
  <button id="guu" class='secList'>Section3</button>
</div>

<!-- Sections -->
<div class="fuu section">
  <h2>Section1</h2>
  <p>hoge1</p>
</div>

<div class="euu section">
  <h2>Section2</h2>
  <p>hoge2</p>
</div>

<div class="guu section">
  <h2>Section3</h2>
  <p>hoge3</p>
</div>

各ボタンには同じクラス名をつけ、各セクションにもセクション用の同じクラス名をつける。
ボタンの id と同じ値を、対応するセクションのクラスにつける。

jQuery

$(function(){
  $('.section').hide();

  $('.secList').on('click',function(){
    // クリックした要素の ID と違うクラス名のセクションを非表示
    $('.section').not($('.'+$(this).attr('id'))).hide();
    // クリックした要素の ID と同じクラスのセクションを表示
    $('.'+$(this).attr('id')).show();

    // toggle にすると、同じボタンを 2 回押すと非表示になる
    // $('.'+$(this).attr('id')).toggle();
  });
});

$(this).attr('id') でクリックしたボタンの id を取得。
セクションはボタン id と同じクラス名になっているので、 '.' をつける。