Result
detailsタグでFAQコンテンツっぽいやつを作るサンプルです
JSも使わずCSSの力業も不要なのでコードもスッキリ見やすいですね
例によってIEでは使えないHTMLタグですが、便利には違いないですね
summaryにoutline: none;を付けないとクリック時にボーダーが表示されてしまいます。
css
summary { display: block; outline: none;}summary:before {/*矢印アイコンを付与*/ display: inline-block; content: "›"; margin-right: 0.5rem; font-weight: bold; font-size: 1rem; transition: all 300ms ease;}/*答え部分が開いている場合の処理*/details[open] summary { color: red; transition: all 300ms ease;}details[open] p { animation: openDetail 400ms ease; background: #f9f9f9;}details[open] summary::before { transform: rotate(90deg);}@keyframes openDetail {/*アニメーション設定*/ 0% { opacity: 0; background: white; transform: translateY(0%); } 50% { transform: translateY(3%); } 100% { opacity: 1; background: #f9f9f9; transform: translateY(0%); }} |
html
<details role="group"> <summary role="button" aria-expanded="false"><strong>hoge?</strong></summary> <p>hogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge hogehogehogehogehoge </p></details> |
can i use
details及びsummaryタグのブラウザサポート状況です
