transition

<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;
}
/* 問題1. 開く時と閉じる時にアニメーションさせながら動かすCSSを書いてください */
.accordion-content {
  background-color: #e6e6e6;
  border: 1px solid #aaa;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s;
}


.accordion-button {
  width: 100%;
  text-align: left;
  padding: 10px;
  cursor: pointer;
  border: 1px solid #aaa;
  background-color: #f9f9f9;
}
/* 問題1. 開く時と閉じる時にアニメーションさせながら動かすCSSを書いてください */
.accordion-content {
  background-color: #e6e6e6;
  border: 1px solid #aaa;
  max-height: 0;
  overflow: hidden;
}


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

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

element.scrollHeight

element.style

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

document.getElementById()

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

if文

else節

null（javascript）

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

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


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