CSS : アコーディオン

　detailsにsummary、というタグを使用するそうで。

　inputのtype=”checkbox” で対応していたのも今や昔、勉強しないとどんどん知識が古くなる。悔しいがどんどん楽になる。それがHTML。シンプルにダイレクトに書けるなら、それを使った方が良いよね。後から見直すユーザーにとって「分かりやすい」は大正義なのです。
　折りたたまれている部分にdivタグ使っていますが、なくても大丈夫です。paddingを使いたかっただけです。

アイコンの部分は、Font Awesome 5 使ってます。（５かよ）

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>アコーディオンサンプル</title>

    <link rel='stylesheet' id='fontawsome-css' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css' type='text/css' media='all' />

    <style type="text/css">
/* ブラウザ初期化 */
* {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    font-size: 100%;
    vertical-align: baseline;
    box-sizing: border-box;
}

/* デフォルトアイコン削除 */
summary {
  display: block;
}
summary::-webkit-details-marker {
  display: none;
}
/* アイコン設定 */
summary.icon_plus::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
    padding-left: 1em;
    padding-right: .5em;
	content: "\f055";
}
/* アイコン設定 オープン時 */
details[open] summary.icon_plus::before {
	content: "\f056";
}
/* 表示内容 */
details div {
    padding: 1em 3em;
}

    </style>
</head>

<body>

<details>
    <summary class="icon_plus">
        概要
    </summary>
    <div>
        折りたたまれている部分です。
    </div>
</details>

</body>
</html>


details {
    // デフォルトアイコン削除
    summary {
        display: block;
        &::-webkit-details-marker {
            display: none;
        }
    }

    // アイコン設定
    /// クローズ時
    & summary::before {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        padding-left: 1em;
        padding-right: .5em;
        content: "\f055";
    }
    /// オープン時
    &[open] summary::before {
        content: "\f056";
    }

    // 表示内容
    div {
        padding: 1em 3em;
    }
}