狼読

2020/06/03

Technology

#css

#html

#js

[jquery]slideToggleを使ってアコーディオンを作っていよう

今回は、queryのslideToggleを駆使してホームページでよく使われるアコーディオンを作ってみようと思います。

アコーディオンは、Q&Aやメニューバーなどある程度の複数のコンテンツを一覧と表示させ、詳細が見たい時だけクリックさせる時などに非常によく使われております。そんなアコーディオンの作り方を今回は、ご紹介したいと思います。

HTMLと CSSでアコーディオンの見た目を整えよう

HTMLとCSSまずは、アコーディオンの見た目を作ってみようと思います。

リスト構造を使って今回は作ってみようと思います。
アコーディオンを作る際の考え方は多くありますが、今回はリストのなかにタイトルとコンテンツを入れて、そのタイトルをクリックしたら隣接するコンテンツを展開するといったものを目指します。

<style>
  .sample_accordion{
    padding:0;
  }
  .sample_accordion li{
    list-style:none;
    padding:0;
    margin-bottom:10px;
  }
  .sample_accordion .sample_actitle{
     border:1px solid #000;
     background:#eee;
     text-align:center;
     padding-top:0.5em;
     padding-bottom:0.5em;
  }
   .sample_accordion .sample_accontent{
     padding:30px;
     border:1px solid #eee;
   }
</style>
<ul class="sample_accordion">
 <li>
  <div class="sample_actitle">アコーディオンメニュー１</div>
  <div class="sample_accontent">
    <p>アコーディオンメニュー１のコンテンツになります。</p>
　　 <p>アコーディオンメニュー１のコンテンツになります。</p>
　　 <p>アコーディオンメニュー１のコンテンツになります。</p>
  </div>
</li>
 <li>
  <div class="sample_actitle">アコーディオンメニュー2</div>
  <div class="sample_accontent">
    <p>アコーディオンメニュー2のコンテンツになります。</p>
　　 <p>アコーディオンメニュー2のコンテンツになります。</p>
　　 <p>アコーディオンメニュー2のコンテンツになります。</p>
  </div>
 </li>
 <li>
  <div class="sample_actitle">アコーディオンメニュー3</div>
  <div class="sample_accontent">
    <p>アコーディオンメニュー3のコンテンツになります。</p>
　　 <p>アコーディオンメニュー3のコンテンツになります。</p>
　　 <p>アコーディオンメニュー3のコンテンツになります。</p>
  </div>
 </li>
</ul>

htmlとcssでアコーディオンの見た目を整えて見た

アコーディオンメニュー１

アコーディオンメニュー１のコンテンツになります。
　　
アコーディオンメニュー１のコンテンツになります。
　　
アコーディオンメニュー１のコンテンツになります。
アコーディオンメニュー2

アコーディオンメニュー2のコンテンツになります。
　　
アコーディオンメニュー2のコンテンツになります。
　　
アコーディオンメニュー2のコンテンツになります。
アコーディオンメニュー3

アコーディオンメニュー3のコンテンツになります。
　　
アコーディオンメニュー3のコンテンツになります。
　　
アコーディオンメニュー3のコンテンツになります。

上記のようにクリックすれば展開するボタンと展開した場合のコンテンツのデザインをcssで整えていきました。
次はこれが全て閉じてる状態で、クリックすれば展開するようにしていきましょう。

slideToggleを使って、アコーディオンが開閉するようにしてみよう

まず上述のHTMLを全て閉じた状態にしましょう。
見た目的に閉じて入ればいいので、.sample_accontentにdisplay:noneを追記して見ましょう。
その後、jqueryを記述していきましょう。

上記の構造を考えた場合、「.sample_accordion .sample_actitle」つまりタイトルがクリックされた時　そのクリックした.sample_actitleの隣接した「.sample_accontent」がスライドして展開されればアコーディオンとして成立しますね。
.sample_actitleがクリックされた時にその要素のnextの要素をslideToggleを使うことで展開することが可能です。
jqueryは次のように記述します。

<script>
  $(function(){
    $('.sample_accordion .sample_actitle').on('click',function(){
       $(this).next().slideToggle();
    });
  });
</script>

slideToggleを使ったアコーディオンの実装サンプル

アコーディオンメニュー１

アコーディオンメニュー１のコンテンツになります。
　　
アコーディオンメニュー１のコンテンツになります。
　　
アコーディオンメニュー１のコンテンツになります。
アコーディオンメニュー2

アコーディオンメニュー2のコンテンツになります。
　　
アコーディオンメニュー2のコンテンツになります。
　　
アコーディオンメニュー2のコンテンツになります。
アコーディオンメニュー3

アコーディオンメニュー3のコンテンツになります。
　　
アコーディオンメニュー3のコンテンツになります。
　　
アコーディオンメニュー3のコンテンツになります。

上記のようにクリックに対して隣接コンテンツが開くようになりましたね。

上記のようにjqueryは非常にシンプルです。クリックイベントを取得して隣接を開くようにするといったもので作成可能です。

まとめ

今回は、slideToggleを使ったシンプルなアコーディオンの作り方はご紹介させていただきました。今回のアコーディオンでは、クリックしたら展開するだけといったものです。応用としてクリックしたら今まで開いていたものが閉じて、クリックしたものしか展開されないものや、クリックされた時にデザインを変えたり様々なことが考えられます。あなたの情報発信にあったアコーディオンを作成して見てください。今回は基礎をご紹介させていただきました。

Profile Card