details

CSS

HTML

<details>
    <summary>クリックしてね</summary>
    summaryタグをクリックしてアコーディオンを開くと、ココに書いてある説明文が読めます。
</details>

Javacriptを使わなくてもHTMLタグのみでアコーディオンがつくれます

クリックしたときに詳細文をふわっと表示させたいとき

details {
    transition: 0.5s;
}

オープンしているときのスタイルを変える

details[open] {
    background: #39affa;  // 背景色をつけたいとき
}
details[open] summary {
    color: gray;
}

はじめからアコーディオンを開いておく

<details open> ... </details>

矢印を消す

summary { display: block; }
summary::-webkit-details-marker { display: none; }

summaryがdisplay:list-itemになっているため、blockに上書きすれば消せます

Chrome, SafariではWEBKITで対応します

矢印をカスタマイズする（途中）

summary {
    display: flex;
}
summary:before {
    font-family: "Font Awesome 5 Free",
    font-weight: 900;
    content: "\f105";
    transition: transfrom 0.3s ease;
}
details[open] summary::before {
    transform: rotate(90deg;
}
BACK