Webデザイン

【PR】を含みます。

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

コピペで使える！アコーディオンメニュー

JavaScript（jQuery未使用）でアコーディオン(開閉ボタン)を実装する方法を紹介します。時々jQueryを使用できな案件があるため、アコーディオンをJavaScriptで実装できるようメモしておきます。

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

あわせて読む
jQuery アコーディオンメニューを作成する方法
【jQuery】アコーディオン(開閉ボタン)を実装する方法

もくじjQueryを使用したアコーディオンサンプルjQueryを使用したアコーディオンコピペ用コード使用方法　Q&A動かないのですが、どうすれば良いですか？アコーディオンの追加方法は？レスポンシブに対 ...

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

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

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

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

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

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

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

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

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

Q. 使用方法は？

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

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

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

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: 0;
  62.   background: #d4e6f9;
  63.   transition: 0.3s linear;
  64. }
  66. .accordion_content-inner {
  67.   padding: 0 1em 1em;
  68. }
  70. .accordion_content-bg {
  71.   padding: 1em;
  72.   background: #fff;
  73.   border-radius: 10px;
  74. }
  76. .accordion_header p,
  77. .accordion_content p {
  78.   margin: 0;
  79. }
  81. /* アコーディオンが開いている時 */
  82. .accordion_row.-active .accordion_bar:nth-of-type(2) {
  83.   opacity: 0;
  84. }
JavaSctipt
Copy
  1. const js_accordion_row = document.querySelectorAll('.js_accordion_row');
  2. const js_accordion_btn = document.querySelectorAll('.js_accordion_btn');
  3. const js_accordion_content = document.querySelectorAll('.js_accordion_content');
  5. js_accordion_btn.forEach(function (el, i) {
  6.   el.addEventListener('click', function () {
  7.     let js_accordion_content_height = js_accordion_content[i].offsetHeight
  9.     if(js_accordion_content_height === 0){
  10.       slide_down(i);
  11.     } else {
  12.       slide_up(i);
  13.     }
  14.   });
  15. });
  17. function slide_down(i) {
  18.   js_accordion_content[i].style.display = 'block';
  20.   let clone = js_accordion_content[i].cloneNode(true);
  21.   js_accordion_content[i].parentNode.appendChild(clone);
  22.   clone.style.cssText = 'display:block; height:auto; position:absolute';
  24.   let clone_height = clone.offsetHeight;
  25.   js_accordion_content[i].parentNode.removeChild(clone);
  27.   js_accordion_row[i].classList.add('-active');
  28.   js_accordion_content[i].style.height = clone_height + 'px';
  29. }
  31. function slide_up(i) {
  32.   js_accordion_row[i].classList.remove('-active');
  33.   js_accordion_content[i].style.height = '0';
  34. }
  36. //画面リサイズ時
  37. window.addEventListener('resize', function() {
  38.   js_accordion_content.forEach(function (el) {
  39.     content_height(el);
  40.   });
  41. });
  43. //ページ読み込み時
  44. js_accordion_content.forEach(function (el) {
  45.   content_height(el);
  46. });
  48. function content_height(el) {
  49.   let elHeight = getComputedStyle(el).height.replace('px', '');
  51.   if (elHeight > 0 || elHeight === 'auto') {
  52.     let clone = el.cloneNode(true);
  53.     el.parentNode.appendChild(clone);
  54.     clone.style.cssText = 'display:block; height:auto; position:absolute';
  56.     let clone_height = clone.offsetHeight;
  57.     el.parentNode.removeChild(clone);
  59.     el.style.height = clone_height + 'px';
  60.   }
  61. }

使用方法　Q&A

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

下記<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>

一つ目のアコーディオンを開いた状態にする方法は？

HTMLとCSSに下記記述を追加することで可能です。


1.一つ目の<div class="accordion_row js_accordion_row"></div>の「class」に-activeを追加

2.CSSに下記記述を追加

CSS
Copy
  1. .accordion_row:first-child .accordion_content {
  2.   display: block;
  3.   height: auto;
  4. }

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

対応してます。

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

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

あわせて読む
jQuery アコーディオンメニューを作成する方法
【jQuery】アコーディオン(開閉ボタン)を実装する方法

もくじjQueryを使用したアコーディオンサンプルjQueryを使用したアコーディオンコピペ用コード使用方法　Q&A動かないのですが、どうすれば良いですか？アコーディオンの追加方法は？レスポンシブに対 ...

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

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

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

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

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

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

-Webデザイン
-, ,