element.scrollHeight

element.style

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

if文

else節

null（javascript）

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


.accordion-button {
  width: 100%;
  text-align: left;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #aaa;
  background-color: #f9f9f9;
}
.accordion-content {
  background-color: #e6e6e6;
  border: 1px solid #aaa;
  max-height: 0;
  overflow: hidden;
}


const buttons = document.querySelectorAll('.accordion-button')

buttons.forEach(button => {
  button.addEventListener('click', () => {
    const contentId = button.getAttribute('data-target');
    const content = document.getElementById(contentId);

    // 問題1. クリックした時、開く閉じるが交互に起こる処理をJavaScriptで書いてください
    content.style.maxHeight = content.scrollHeight + 'px';
  });
});


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

<button>

<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()

document.getElementById()

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

transition

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

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


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

JavaScript DOM操作コース

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

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