いままで div やら dl やら input やらでつくっていた折りたたみコンテンツ。
アコーディオンの部分はJSで開閉させていましたが。
details と summary タグで実装すると Javascript 不要です。

details と summary タグ、 HTML

See the Pen detailsアコーディオン【HTML】 by kaori yamazaki (@kaori-yamazaki) on CodePen.

detailsで全体を囲って、summaryにアコーディオンのタイトルを入れます。こちらは常に見えているテキスト。
クリックで開閉する中身はsummaryの下、detailsの中に書きます。pやulなどでも◎

はじめからアコーディオンを開いておきたい場合は、detailsタグにopen属性を指定します。

ちなみに、inputタグ使った場合

<input id="accordion" type="checkbox" class="open">
<label class="accordion_heading" for="accordion">タイトル</label>
<div class="accordion_content">
  中身はここに書くよ
</div>

複雑。
パッと見てアコーディオンだということがわかりにくいです。

開閉にJSを使うので、スクリーンリーダー対策をしないと読み上げしてくれません。サイト内検索でヒットしてもアコーディオンは閉じたままなので探しにくい。

details と summary タグを使うメリット

「よくある質問」やメニュー表示で使う機会が多いアコーディオン。
コンテンツが長くなってしまうので、必要のないときは隠しておきたい。
けれど、常時閉じているコンテンツの中に重要なことが記載されているので、探しているときに探したいものが見つけにくくなるというデメリットも。

detailsとsummaryを使うとスクリーンリーダーが開閉の状態についても読み上げしてくれます。
またサイト内で単語検索、ヒットしたときに、アコーディオンが開いてくれている。
タグを使うだけで、なにもしなくても最適化されているのがスバラシですね◎

読み上げや検索のことも考えたdetails と summary タグ、IEでは動きませんが、主要ブラウザで使用可能。
IEは滅亡したので！使いましょう。

CSSだけで綺麗にするよ

See the Pen detailsアコーディオン【CSSで装飾】 by kaori yamazaki (@kaori-yamazaki) on CodePen.

HTMLだけで、開いたり閉じたり、三角ボタンまで出てきてくれたので。CSSいらないかなって思ったけど、ちょっと装飾してみました。

トグルボタンは擬似要素で作成。
開いた時のトグルボタンの反転やコンテンツがふわっと出る、もCSSのアニメーションで。JS不使用でございます。

ポイント

デフォルトで出てくる三角を消す

/* defaultの▼アイコンを消す */
summary {
  display: block;
}
summary::-webkit-details-marker {
  display: none;
}

webiktはsafari対応。

開閉時、もわっと出す

/* アコーディオンオープン・アニメーション */
details[open] .details_content {
  animation: fadeIn 0.85s ease;
}
@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(-12px);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}

アニメーションさせました。

開いた時ボタン反転

/* 三角ボタン切り替え */
details[open] .toggle_button {
  transform: rotate(180deg);
}

details[open]というセレクタをつかいます。

ボタンを ＋ から ー に変えるJS

See the Pen detailsアコーディオン【CSSで装飾+jQuery】 by kaori yamazaki (@kaori-yamazaki) on CodePen.

トグルボタンをちょっと変えてみた。addclassつかいました。
動きや見た目にこだわる場合はJSで◎

ドロップダウンメニューやハンバーガーメニューなども作れそうです。
「ハンバーガーメニュー」って見ただけでなんか美味しそうでワクワクしちゃいますが、ファーストフード店でいちばんすきなハンバーガーはバーガーキングのワッパーです。素朴で美味しいよね。ハードロックカフェもすきです。佐世保バーガーもすきでした。横須賀に来たらぜひ！の、一押しハンバーガーはHoneyBee。

detailsとsummaryは実装が簡単なうえに使い勝手もよろしいのでぜひ。