狼読

2020/06/05

[jquery]クリック時に矢印を動かして展開したことがわかるアコーディオンの作り方

アコーディオンメニューで開閉を行う際に、開閉されてるかわかるように下向きの矢印がついていることがないですか？開いてない状態では下向きの矢印がついていて、開くと上向きの矢印がついている状態です。

矢印をつけることで開閉しているのかユーザーにわかりやすくすることは非常に大切です。当ブログでは、下向きの矢印と上向きの矢印の作り方と一般的なアコーディオンの作り方の紹介をさせていただきました。
今回は、上記の２つの方法を組み合わせて矢印が連動するアコーディオンの作り方をご紹介したいと思います。

HTMLとCSSを使って矢印付きのアコーディオンを作ってみよう

HTMLとCSSを使ってまずは、矢印月のアコーディオンをデザインしてみようと思います。開閉してる時と開閉してない時のデザインを両方作って見ます。

activeというクラスをつけることで、デザインの切り替えを行います。

activeがついている場合は、上向きの矢印が出るようにし、acitiveがついていない場合は、下向きの矢印が出るようにします。
またそれに伴い、アコーディオンが展開したコンテンツに対してもactiveをつけることでついてない場合は、display:noneで見えないようにします。

サンプルコードと実装サンプルは次の通りです。

<style>
 .sample_arrowac{
    padding:0;
    list-style:none;
 }
 .sample_arrowac .sample_arrowac_title{
   background:#eee;
   border:1px solid #ccc;
   text-align:center;
   padding-top:0.5em;
   padding-bottom:0.5em;
   position:relative;
 }
 .sample_arrowac .sample_arrows_content{
   padding:40px;
   border:1px solid #ccc;
 }
 .sample_arrowac .sample_arrowac_title:before{
   content:"";
 display:inline-block;
 width:20px;
 height:20px;
 border-right:1px solid #aaa;
 border-bottom:1px solid #aaa;
 transform:rotateZ(-135deg);
 position:absolute;
 right:20px;
 top:15px;
 }
 .sample_arrowac .sample_arrowac_title.active:before{
     content:"";
 display:inline-block;
 width:20px;
 height:20px;
 border-right:1px solid #aaa;
 border-bottom:1px solid #aaa;
 transform:rotateZ(45deg);
 position:absolute;
 right:20px;
 top:5px;
 }
 .sample_arrowac .sample_arrowac_content{
   border-left:1px solid #ccc;
 border-right:1px solid #ccc;
 border-bottom:1px solid #ccc;
   padding:30px;
   margin-bottom:10px;
 display:none;
 }
  .sample_arrowac .sample_arrowac_content.active{
   display:block;
 }
</style>
<ul class="sample_arrowac">
 <li>
   <div class="sample_arrowac_title active">
    アコーディオンメニュー1
   </div>
   <div class="sample_arrowac_content active">
    <p>アコーディオンメニュー１のコンテンツです</p>
    <p>アコーディオンメニュー１が正常に開閉されました</p>
    <p>矢印の向きが変わります。</p>
   </div>
 </li>
 <li>
   <div class="sample_arrowac_title">
    アコーディオンメニュー2
   </div>
   <div class="sample_arrowac_content">
    <p>アコーディオンメニュー2のコンテンツです</p>
    <p>アコーディオンメニュー2が正常に開閉されました</p>
    <p>矢印の向きが変わります。</p>
   </div>
 </li>
<li>
   <div class="sample_arrowac_title">
    アコーディオンメニュー3
   </div>
   <div class="sample_arrowac_content">
    <p>アコーディオンメニュー3のコンテンツです</p>
    <p>アコーディオンメニュー3が正常に開閉されました</p>
    <p>矢印の向きが変わります。</p>
   </div>
 </li>
</ul>

HTMLとCSSを使った矢印つきアコーディオンの見た目のデザイン

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

アコーディオンメニュー１のコンテンツです

アコーディオンメニュー１が正常に開閉されました

矢印の向きが変わります。
アコーディオンメニュー2

アコーディオンメニュー2のコンテンツです

アコーディオンメニュー2が正常に開閉されました

矢印の向きが変わります。
アコーディオンメニュー3

アコーディオンメニュー3のコンテンツです

アコーディオンメニュー3が正常に開閉されました

矢印の向きが変わります。

上記のように展開している時と展開してないデザインをcssを用意します。
この後jqueryを使うことで、こちらのactiveのクラスを付け替えを行うことで見た目のデザインをアコーディオン動作時に切り替えを行います。

jqueryを使ってアコーディオン開閉時に矢印が連動するようにしよう

上記で作ったデザインを元に、jqueryを使ってクラスの付け替えを行います。

付け替えを行うには、toggleClassを使用します。このtoggleClassを使用することでクラスがついてなければついて、ついて入れば削除されるといった動作が可能になります。そのためクリック時にactiveのクラスが切り替えられるようになります。jqueryのコードと実装例は次の通りです。

<script>
 $(function(){
  $('.sample_arrowac .sample_arrowac_title').on('click',function(){
   $(this).next().slideToggle();
   $(this).next().toggleClass('active');
   $(this).toggleClass('active');
  });
 });
</script>