<button>

<div>

カスタムデータ属性

<div>
  <button class="accordion-button" data-target="content-1">タイトル1</button>
  <div id="content-1" class="accordion-content">
    <p>こちらはタイトル1の内容です。</p>
  </div>
</div>





<div>
  <button class="accordion-button" data-target="content-2">タイトル2</button>
  <div id="content-2" class="accordion-content">
    <p>こちらはタイトル2の内容です。</p>
  </div>
</div>

<div></div>

ボタンとコンテンツの配置

border

background-color

width

text-align

cursor

padding

padding: 10px 20px 30px;

上記のような場合、余白は上が$(1)px、右が$(2)px、下が$(3)px、左が$(4)pxとなる。

アコーディオンのスタイルの設定

max-height

overflow

コンテンツを閉じた状態に設定

document.querySelectorAll()

配列操作/forEach

document.addEventListener()

アコーディオンを開く動作の設定1

element.getAttribute()

element.scrollHeight

element.style

~~~javascript
document.getElementById($(1)).style.$(2) = $(3);
~~~

document.getElementById()

アコーディオンを開く動作の設定2

if文

else節

null（javascript）

アコーディオンを閉じる動作の設定

transition

開閉する時のアニメーション

HTMLとCSSでアコーディオンのレイアウトを作成し、JavaScriptで開閉機能を追加します。
スタイル設定からアニメーション効果まで学びます。


webサイトに動きをつけたり、表示内容を切り替えたり、formの入力を制御するなど様々な処理について学んでいきます

JavaScript DOM操作コース

【実践🔥】DOM操作でUIアニメーションを実装しよう

「アコーディオンを作ろう」レッスンの総復習クイズです。

アコーディオンを作ろうの総復習クイズ

アコーディオンを作ろう