アコーディオンメニューについてと作り方

Webサイトにおける「アコーディオン」とは、特定の箇所をクリックすることで隠れていた情報を表示させる方法です。ナビゲーションメニューやよくある質問などによく使われます。
楽器のアコーディオンのように開閉することからこのように呼ばれているそうです。

そんなアコーディオンの実装方法についてのメモです。いくつかのパターンを知っておくとサイトに適切なアコーディオンが作れるはず。さまざまなアコーディンをご紹介します。

アコーディオンの使い所

Webサイトはアクセスしてきたユーザーに情報を伝えるものです。ただしそのページの全ての情報がユーザーが知りたいものではないかもしれません。

たくさんの情報を1ページに全て収めようとするととても長くなってしまうことがあります。そのせいで知りたい情報に辿り着くまでにスクロールをたくさんしなければず時間がかかってしまいます。そうなると全て閲覧する前に離脱してしまう可能性もあるでしょう。

ここでアコーディオンを使うことで使いやすいサイトになります。
初めは詳細を伏せておいて、より詳しく知りたいと思った時にクリックして見てもらうようにすれば、スクロール量を減らすことができます。

例えば「よくある質問」なんかはそのことを知りたい人もいればそうでない人もいます。「質問」の部分だけを表示して、あとはその情報を知りたい人だけが詳細を見るようにできればいいわけです。

クリックさせる手間を取るかページの情報量を少なく見せるかは、ページの内容によって選択する必要があります。

アコーディオンを使うとSEOで不利になる?

サイト運営ではSEOを重視することもあるでしょう。そこで気になるのが、アコーディオンを使って非表示にすると評価が下がってしまうのではないか、という点です。

昔は評価が下がってしまっていたようですが、現在ではその心配はしなくて良いようです。

検索表示では不利にならないものの、検索からアクセスしてきた人が探している情報を見つけられない可能性はあります。使い所はしっかり考えていきましょう。

アコーディオンを作る際の注意点

  • 開閉できることを分かりやすくする。
  • クリックしやすいテキストを設定する。

アコーディオンはクリックしてもらうことが必要です。見逃さずにクリックしてもらうためにもアコーディオン要素をデザインするときはこの2点に注意しましょう。

開閉できることが分かるアイコンやテキストは必須とも言えます。一般的にプラス・マイナスや上下の矢印などが多く使われます。

必要な情報であるかを判断する材料が表示されるテキストです。ここが分かりづらいと情報を探す手間がかかってしまうので表示するテキストをよく考えてみてください。

またアクセシビリティを考慮するならマークアップの方法も考える必要があります。

アコーディオンの作り方(jQuery使用)

アコーディオンは特定の要素をクリックすると非表示になっているところが開閉できるようになっていることが最低条件。

  • 初めから表示されている・クリックする要素を作る
  • 初めは非表示で動作があったら表示させる要素を作る
  • クリックしたら表示させるためのコードを書く

これらが揃っていれば最低条件はクリアできます。
あとは見た目や動きを追加してサイトに合わせたアコーディオンにしていきます。

まずは jQuery を使ったアコーディオンの作り方をご紹介します。

【jQuery を使うための準備】

<!-- CDN -->  
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

<!-- ダウンロード -->  
<script src="jQueryのダウンロード場所/jquery-3.7.1.min.js"></script>

jQuery 公式サイトはこちら

【知っておきたい jQuery コード】

ここでは jQuery の slideToggle() を使って開閉するようにしています。開くだけ、閉じるだけといったように処理を分けたい場合は slideUp()slideDown() を使用します。

常時表示されるタイトルとなる要素にクラスを付け外しすることでCSSで見た目を変化させるためにtoggleClass()addClass()removeClass() なども使用します。

シンプルでベーシックなアコーディオン

クリックして開閉させるシンプルかつベーシックなアコーディオンです。

JSは以下のコードのみでOK。特定の場所がクリックされたらその下にある中身の要素を表示・非表示させることと、クリックした要素に「open」というクラスを追加・削除するようにしています。

$(function(){
  $('.accordion01 .ac_heading').on('click', function(){
    $(this).next('.ac_content').slideToggle();
    $(this).toggleClass("open");
  });
});

クリックしたときにクラスをつけることでアイコンやクリック要素の見た目を変化させることができます。

閉じるボタンをつける

隠れている中身の部分が長くなるようなら閉じるボタンをつけてあげると親切です。

JSではボタンをクリックした場合の処理を加えます。ボタンがある場所からそれぞれの要素までを指定して処理する内容を追加しています。

$(function(){
  $('.accordion03 .ac_heading').on('click', function(){
    $(this).next('.ac_content').slideToggle();
    $(this).toggleClass("open");
  });
  // 閉じるボタンをクリックした場合
  $('.accordion03 .close_button').on('click', function() {
    $(this).parents('.ac_content').prev('.ac_heading').removeClass("open");
    $(this).parents('.ac_content').slideUp();
  });
});

ここでは parents()prev() を使ってクラスを取り除きたい要素のまでの道順を示しています。

$(this).parents('.ac_content').prev('.ac_heading').removeClass("open");
// ボタン要素の親要素 = ac_content → その前にあるタイトル要素 = ac_heading → openクラスを削除

閉じるボタンをクリックした時は要素をスライドアップさせるだけなので、slideUp() を使用します。

一つ開いたら別の中身は閉じる

隠れている中身を常に一つだけ表示させたい場合に使えるアコーディオンです。

JSはシンプルなアコーディオンのコードに、クリックした場所以外の部分はクラスの削除と要素のスライドアップを指定しています。

$(function(){
  $('.accordion02 .ac_heading').on('click', function(){
    $(this).next('.ac_content').slideToggle();
    $(this).toggleClass("open");
    $('.accordion02 .ac_heading').not($(this)).removeClass("open");
    $('.accordion02 .ac_heading').not($(this)).next('.ac_wrap .ac_content').slideUp();
  });
});

.not($(this)) を使って「クリックした場所以外」を指定しています。

ホバーでアコーディオン

ホバーによって開閉させることもできます。主にPC表示の時にクリックせずとも表示されるようにしたい場合などに活用できます。より簡単に非表示部分を見てもらいやすくなるのもメリットでしょう。

ここでは ‘mouseenter’ と ‘mouseleave’ を使用したサンプルを作成しました。

$(function(){
  $('.accordion04 .ac_wrap').on({
    'mouseenter' : function() {
      $(this).find('.ac_content').stop().slideDown();
      $(this).find('.ac_heading').addClass("open");
    },
    'mouseleave' : function(){
      $(this).find('.ac_content').stop().slideUp();
      $(this).find('.ac_heading').removeClass("open");
    }
  });
});

HTMLの作り方や動作によって ‘mouseenter’ や ‘mouseleave’ のところは別のイベントを使用することもできます。

折りたたみ要素のHTMLタグを利用してアコーディオンを作る

HTMLタグだけでもアコーディオンは作れます。

使用するのは detailsタグとsummaryタグです。detailsタグは詳細・補足情報を折りたたんでおくHTMLタグです。アコーディオンのタイトル要素となる部分がsummaryタグです。このタグに囲われているテキストは初めから表示され、それ以外の部分は折りたたまれます。

単純なアコーディオン表示ができればいいなら、とてもシンプルで簡単なコードで実装できます。

<details>
  <summary>HTMLタグでアコーディオンを作るには?</summary>
  <p>detailsタグとsummaryタグを使用します。</p>
</details>

以下は上記コードを書いて出力したものです。

HTMLタグでアコーディオンを作るには?

detailsタグとsummaryタグを使用します。

デフォルトでは「▶︎」マークなっていますが、CSSで変更可能です。summary::marker にスタイルがついているので、これを上書きすればOK。

開いた状態にしておきたい場合は、detailsタグにopen属性を追加します。

<details open>
  <summary>HTMLタグでアコーディオンを作るには?</summary>
  <p>detailsタグとsummaryタグを使用します。</p>
</details>

detailsタグを使えばCSSだけでアコーディオンを作ることができる

がっつり動きを出したい場合はあまり向いていないのですが、CSSだけでアニメーションを作って動きを変化させることもできます。

detailsタグの中に記述するsummaryタグ要素をクリックするとdetailsタグにopen属性が付きます。これを利用して開いている状態の時、閉じている状態の時とCSSでスタイルを変化させることができます。

以前はinputタグを利用してCSSだけでアコーディオンを作る方法で紹介されている記事が多かったと思います。しかしこのタグを使用した方がアクセシビリティの最適化にもなりますし、コンテンツの役割を明示するという点(SEO対策)においてもこちらのタグを利用するのがおすすめです。

動きのあるアコーディオンサンプル

アコーディオンのデザインの参考になるものをご紹介します。デザイン性の高いアコーディオンを作りたい時に参考になると思います。

【Funky Pure CSS Accordion – CodePen】

クリックするとアイコンや背景が変化するアコーディオンです。

See the Pen Funky Pure CSS Accordion by Jamie Coulter (@jcoulterdesign) on CodePen.

【Pure CSS Horizontal Accordion – CodePen】

横に表示させるタイプのアコーディオンです。

See the Pen Pure CSS Horizontal Accordion by Aysha Anggraini (@rrenula) on CodePen.

【Expanding Horizontal Accordion in React – CodePen】

こちらも横に表示させるタイプのアコーディオンです。複数の画像が並んでいてクリックすると画像が大きくなりテキストが表示されます。

See the Pen Expanding Horizontal Accordion in React by Sean (@nevernotsean) on CodePen.

【Simple Flat UI CSS Accordion – CodePen】

コンテンツをふわっとした感じで表示させているアコーディオンです。

See the Pen Simple Flat UI CSS Accordion by Virlyz ID (@samsurysites) on CodePen.

カテゴリー : HTML-CSS

TOPへ