Webデザイン

【PR】を含みます。

【jQuery】アコーディオン(開閉ボタン)を実装する方法

jQuery アコーディオンメニューを作成する方法

jQueryでアコーディオン(開閉ボタン)を実装する方法を紹介します。フロントエンドのコーディングでよく使用するため、コピペで使用できるようまとめてます。

アコーディオンをJavaScriptで実装する方法は以下の記事で紹介してます。

あわせて読む
コピペで使える！アコーディオンメニュー
【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

もくじJavaScriptを使用したアコーディオンサンプルJavaScriptを使用したアコーディオンコピペ用コード使用方法　Q&Aアコーディオンの追加方法は？一つ目のアコーディオンを開いた状態にする ...

アコーディオンをHTMLのみで実装する方法は以下の記事で紹介してます。

あわせて読む
HTMLのみでアコーディオンを実装する方法
【CSS不要】HTMLのみでアコーディオン(開閉ボタン)を実装する方法

もくじ【サンプル】HTMLのみでアコーディオンメニューを実装【実装コード】HTMLのみでアコーディオンメニューを実装detailsタグとsummaryタグにCSS当ててデザインを調整【サンプル】CSS ...

アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介してます。

あわせて読む
アコーディオンメニュー
【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法

もくじ【単体用】アコーディオン（折りたたみメニュー）【単体用】HTML・CSS【単体用】アコーディオン（折りたたみメニュー）を複数利用する場合【2段用】アコーディオン（折りたたみメニュー）【2段用】H ...

jQueryを使用したアコーディオンサンプル

Q. jQueryでアコーディオン(開閉ボタン)を実装する方法は？

A. 下記「jQueryを使用したアコーディオンコピペ用コード」より、HTML・CSS・JavaScriptをコピペするこでアコーディオン(開閉ボタン)を実装することができます。

Q. 使用方法は？

A. 下記「使用方法　Q&A」をご参照ください。

jQueryを使用したアコーディオンコピペ用コード

下記HTML・CSS・JavaSctiptをコピペすることでアコーディオンを実装することができます。

※jQueryを使用するため、事前にjQueryの導入が必要です。

Copyボタンをクリックするとコピーできます。

HTML
Copy
  1. <div class="accordion">
  2.     <div class="accordion_row js_accordion_row">
  3.         <div class="accordion_header js_accordion_btn">
  4.             <p>Q. テキスト</p>
  5.             <span class="accordion_barBox">
  6.                 <span class="accordion_bar"></span>
  7.                 <span class="accordion_bar"></span>
  8.             </span>
  9.         </div>
  10.         <div class="accordion_content js_accordion_content">
  11.             <div class="accordion_content-inner">
  12.                 <div class="accordion_content-bg">
  13.                     <p>A. テキスト</p>
  14.                     <p> ※テキスト</p>
  15.                 </div>
  16.             </div>
  17.         </div>
  18.     </div>
  19.     <div class="accordion_row js_accordion_row">
  20.         <div class="accordion_header js_accordion_btn">
  21.             <p>Q. テキスト</p>
  22.             <span class="accordion_barBox">
  23.                 <span class="accordion_bar"></span>
  24.                 <span class="accordion_bar"></span>
  25.             </span>
  26.         </div>
  27.         <div class="accordion_content js_accordion_content">
  28.             <div class="accordion_content-inner">
  29.                 <div class="accordion_content-bg">
  30.                     <p>A. テキスト</p>
  31.                     <p> ※テキスト</p>
  32.                 </div>
  33.             </div>
  34.         </div>
  35.     </div>
  36. </div>
CSS
Copy
  1. .accordion * {
  2.   box-sizing: border-box;
  3. }
  5. .accordion_row {
  6.   margin-bottom: 15px;
  7.   border-radius: 10px;
  8.   overflow: hidden;
  9.   position: relative;
  10. }
  12. .accordion_row:last-child {
  13.   margin-bottom: 0;
  14. }
  16. .accordion_header {
  17.   padding: 1em 2.8em 1em 2em;
  18.   background: #d4e6f9;
  19.   cursor: pointer;
  20.   position: relative;
  21. }
  23. .accordion_barBox {
  24.   display: block;
  25.   width: 1em;
  26.   height: 1em;
  27.   position: absolute;
  28.   top: 50%;
  29.   right: 1.5em;
  30.   -webkit-transform: translateY(-50%);
  31.   -ms-transform: translateY(-50%);
  32.   transform: translateY(-50%);
  33. }
  35. .accordion_bar {
  36.   display: block;
  37.   width: 0.8em;
  38.   height: 2px;
  39.   background: #444;
  40.   position: absolute;
  41.   top: 50%;
  42.   left: 50%;
  43. }
  45. .accordion_bar:nth-of-type(1) {
  46.   -webkit-transform: translate(-50%, -50%);
  47.   -ms-transform: translate(-50%, -50%);
  48.   transform: translate(-50%, -50%);
  49. }
  51. .accordion_bar:nth-of-type(2) {
  52.   -webkit-transform: translate(-50%, -50%) rotate(90deg);
  53.   -ms-transform: translate(-50%, -50%) rotate(90deg);
  54.   transform: translate(-50%, -50%) rotate(90deg);
  55.   transition: 0.3s linear;
  56. }
  58. .accordion_content {
  59.   display: none;
  60.   width: 100%;
  61.   height: auto;
  62.   background: #d4e6f9;
  63. }
  65. .accordion_content-inner {
  66.   padding: 0 1em 1em;
  67. }
  69. .accordion_content-bg {
  70.   padding: 1em;
  71.   background: #fff;
  72.   border-radius: 10px;
  73. }
  75. .accordion_header p,
  76. .accordion_content p {
  77.   margin: 0;
  78. }
  80. /* アコーディオンが開いている時 */
  81. .accordion_row.-active .accordion_bar:nth-of-type(2) {
  82.   opacity: 0;
  83. }
JavaSctipt
Copy
  1. $(function() {
  2.   $(document).on('click', '.js_accordion_btn', function() {
  3.     let js_accordion_row = $(this).parents('.js_accordion_row');
  4.     let js_accordion_content = js_accordion_row.find('.js_accordion_content');
  6.     if (js_accordion_row.hasClass('-active')) {
  7.       js_accordion_row.removeClass('-active');
  8.       js_accordion_content.slideUp();
  9.     } else {
  10.       js_accordion_row.addClass('-active');
  11.       js_accordion_content.slideDown();
  12.     }
  13.   });
  14. });

使用方法　Q&A

動かないのですが、どうすれば良いですか？

jQueryの使用にはjQueryの導入が必要です。

アコーディオンの追加方法は？

下記<div class="accordion_row js_accordion_row"></div>ブロックを<div class="accordion"></div>内に挿入することでアコーディオンを追加できます。

HTML
Copy
  1. <div class="accordion_row js_accordion_row">
  2.     <div class="accordion_header js_accordion_btn">
  3.         <p>Q. テキスト</p>
  4.         <span class="accordion_barBox">
  5.             <span class="accordion_bar"></span>
  6.             <span class="accordion_bar"></span>
  7.         </span>
  8.     </div>
  9.     <div class="accordion_content js_accordion_content">
  10.         <div class="accordion_content-inner">
  11.             <div class="accordion_content-bg">
  12.                 <p>A. テキスト</p>
  13.                 <p> ※テキスト</p>
  14.             </div>
  15.         </div>
  16.     </div>
  17. </div>

レスポンシブに対応してますか？

対応してます。

jQuery初級者におすすめの1冊

アイコン画像

もみじ

この本はHTMLとCSSの知識がある程度あり、これからjQueryの学習を始める方におすすめの1冊です。

実務で使用するサンプルコードも多数あり、製作現場でも使用できるスキルを学ぶことができます。

アコーディオンをJavaScriptで実装する方法は以下の記事で紹介してます。

あわせて読む
コピペで使える！アコーディオンメニュー
【JavaScript】jQuery未使用でアコーディオン(開閉ボタン)を実装する方法

もくじJavaScriptを使用したアコーディオンサンプルJavaScriptを使用したアコーディオンコピペ用コード使用方法　Q&Aアコーディオンの追加方法は？一つ目のアコーディオンを開いた状態にする ...

アコーディオンをHTMLのみで実装する方法は以下の記事で紹介してます。

あわせて読む
HTMLのみでアコーディオンを実装する方法
【CSS不要】HTMLのみでアコーディオン(開閉ボタン)を実装する方法

もくじ【サンプル】HTMLのみでアコーディオンメニューを実装【実装コード】HTMLのみでアコーディオンメニューを実装detailsタグとsummaryタグにCSS当ててデザインを調整【サンプル】CSS ...

アコーディオンをHTMLとCSSのみで実装する方法は以下の記事で紹介してます。

あわせて読む
アコーディオンメニュー
【HTML・CSS】アコーディオンメニューをHTMLとCSSのみで実装する方法

もくじ【単体用】アコーディオン（折りたたみメニュー）【単体用】HTML・CSS【単体用】アコーディオン（折りたたみメニュー）を複数利用する場合【2段用】アコーディオン（折りたたみメニュー）【2段用】H ...

-Webデザイン
-, , ,