【jQuery】開閉パネル

こんにちは、Ryohei（@ityryohei）です！

開閉パネルは、コンテンツを隠したいときや、長すぎる場合に「続きを見る」などのボタンを設置してコンテンツの全部または一部分を非表示にしておくパネルのことを指します。コンテンツを隠しておくことでユーザーが見たいコンテンツだけを選んで表示することができるため、ユーザビリティの向上に繋げることができます。今回はjQueryで開閉パネルを設置する方法をご紹介したいと思います！

jQueryを読み込む

GoogleのCDNを利用してjQueryを読み込みます。

CDNというのはContents Delivery Network(コンテンツ・デリバリー・ネットワーク)の略称で、ネットワークを経由してウェブコンテンツを利用するサービスを指します。ネットワークに接続されている機器であれば利用することができます。

CDNには有料、無料のものがありますが、jQueryのライブラリファイルは無料で利用できます。

jQueryのライブラリは以下の記述で読み込むことができます。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>

パネルを開いてボタンを非表示にする

まず１つ目の方法です。

最初は要素を隠しておき、ボタンがクリックされたら隠していた要素を表示します。

その際にボタンを非表示にし、要素を開きっぱなしの状態にします。

以下デモになります！

Demo

HTML & JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $( '.contents' ).hide();
  $('.more').on( 'click' ,function(){
    $( '.contents' ).fadeIn();
    $( '.more' ).hide();
  });
});
</script>
<p>表示しておくコンテンツ</p>
<p class="contents">隠しておくコンテンツ</p>
<a class="more" href="#">続きを見る</a>

パネルを開閉する

上記でご紹介したパネルに開閉する処理を加えたものになります。「続きを見る」のボタンを押した後に、パネルを閉じられるようにします。

以下デモになります！

Demo

HTML & JS

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $( '.contents' ).hide();
  $('.more').on( 'click' ,function(){
    if( !$('.contents').hasClass('open') ) {
      $( '.contents' ).slideDown('').addClass('open');
      $('.more').text('閉じる');
    } else {
      $( '.contents' ).slideUp().removeClass('open');
      $('.more').text('続きを見る');
    }
  });
});
</script>
<p>表示しておくコンテンツ</p>
<p class="contents">隠しておくコンテンツ</p>
<a class="more" href="#">続きを見る</a>

同一ページに複数のパネルを設置する

パネルを一つ設置するだけでしたら、上記で紹介した内容で問題ないのですが、複数のパネルを同じページの中で使う場合は少しHTMLとスクリプトを変更する必要があります。テキストをラップ要素で囲んで、スクリプトはラップの子要素によって処理するように変更します。

以下、デモになります！

Demo

HTML

<div class="panel">
  <p>表示しておくコンテンツ。</p>
  <p class="hideContent">隠しておくコンテンツ</p>
  <a class="more" href="#">続きを見る</a>
 </div>

JS

$(document).ready(function(){
  $('.more').on( 'click' ,function(){

  $panel = $(this).parent();
  $panelChild = $panel.children('.hideContent');

  if( !$panelChild.hasClass('open') ) {
    $panelChild.slideDown().addClass('open');
    $panel.children('.more').text('閉じる');
  } else {
    $panelChild.slideUp().removeClass('open');
    $panel.children('.more').text('続きを見る');
  }
  return false;
  });
});

他にも実現する方法はたくさんあると思いますが、参考になれば幸いです！

以上、開閉パネルのご紹介でした！最後まで読んでいただきありがとうございました！