element.getAttribute()

element.scrollHeight

element.style

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

document.getElementById()

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


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

buttons.forEach((button) => {
  button.addEventListener('click', () => {
    // 問題1. ボタンが押された時、対応するコンテンツを表示する処理をJavaScriptで書いてください
    const contentId = button.getAttribute('data-target')
    const content = document.getElementById(contentId)

    content.style.maxHeight = content.scrollHeight + 'px'
  })
})


.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', () => {
      // 問題1. ボタンが押された時、対応するコンテンツを表示する処理をJavaScriptで書いてください
      const contentId = 
      const content = 
    })
})

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

<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

if文

else節

null（javascript）

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

transition

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

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


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