htmlの<details>タグと<summary>タグタグを使えば、簡単に開閉コンテンツが作成できます。

details、summaryタグとは

<details>タグはHTML5で導入された要素で、開閉コンテンツを作成するために使用します。
通常、子要素として <summary>タグを含み、その内容がキャプションとして表示され、クリック（タップ）することで詳細内容を表示または非表示にできます。

details、summaryタグの使い方

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.

summaryタグがない場合の表示

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.

 
任意のキャプションを付けることができず、「詳細」と表示されます。

初期状態をアコーディオンを開いた状態にする

detailsタグにopen属性を付与すると、初期状態をアコーディオンを開いた状態にすることができます。

See the Pen
[HTML] details , open by mkl may (@mkl-may)
on CodePen.

details、summaryタグのCSSスタイリング

三角形アイコンを消す

初期値の display: list-item で三角形アイコンが表示されている状態なので、display: list-item;以外を指定してデフォルトの三角形アイコンを消します。

hoverの際のポインター（指さしマーク）指定

開閉アイコンのカスタマイズ

初期値の三角矢印を消したうえで、疑似要素などを使ってアイコンや画像を表示させます。

See the Pen
Untitled by mkl may (@mkl-may)
on CodePen.

アコーディオンオープン時アニメーション

See the Pen
[HTML] details , animation by mkl may (@mkl-may)
on CodePen.

 
※ただし、上記の方法では最初の1回しかアニメーションになりません。
毎回アニメーションさせるにはJavascriptを併用する必要がありそうです。

完成形

See the Pen
[HTML] details 完成形 by mkl may (@mkl-may)
on CodePen.