狼読

 

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

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

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

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>アコーディオンメニュー1のコンテンツです</p>
    <p>アコーディオンメニュー1が正常に開閉されました</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

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

    アコーディオンメニュー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>

矢印つきのアコーディオンの実装例

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

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

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

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

  • アコーディオンメニュー2

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

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

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

  • アコーディオンメニュー3

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

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

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

上記のように、アコーディオンが開閉に応じて矢印が動作するようになりました。

まとめ

今回は、矢印つきのアコーディオンの作り方をご紹介させていただきました。

cssで変化した時のクラスを用意してそれに対してクリックした時にクラスを付け替えを行うことでこういったアコーディオンのようなものが実装できます。

Profile Card

お空をかけるプログラマー

空のどこか
常時低空飛行のwebプログラマー 徒然なるままに情報を発信します。

関連記事

Related Post

2020/06/09

[html]ラジオボタンを作って、チェック済みにしたり選択できないようにしてみよう

投稿カレンダー

2020年10月
 1234
567891011
12131415161718
19202122232425
262728293031  

Technology

category

©狼読