ネイティブHTMLアコーディオン

あなたは知っていましたか<details> ? あなたが偉大ならば.あなたに幸せです.あなたが--私が好きでないならば、コードは以下のように見えます:

<details>
    <summary>More Information</summary>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</details>

レンダリングされます.

あなたがその「詳細な情報」テキストをクリックするならば、焦点にマウスまたはスペースバーであなたはこれを見ます

をクリックして“詳細情報”を再度展開テキストを非表示になります.
本質的に、あなたが入れた何でもsummary ボタンを押すと要素が押され、details それはすぐ後に来る.あなたはそれらの隣接する子供を包むことができるdiv 簡単にスタイリングのためだけで、次のテキストを右ダンプsummary ちょうどうまくいきます.これはあなたが疑いを持っていた数え切れないほどのカスタムアコーディオンのような多くのヘックを鳴らすことができます.これはあなたが疑いを持っていた数え切れないほどのカスタムアコーディオンのような多くのヘックを鳴らすことができます.ネイティブのHTMLソリューションは、ほとんど常にカスタムの方に好まれ、これは現代のブラウザでサポートされ、その外観は比較的簡単にカスタマイズすることです.
黒い矢印はAとしてレンダリングする:marker on summary ほとんどの最新のブラウザではlist-style-type: none を返します.content or background-image 選択します.この例外は、サファリです::-webkit-details-marker ( summary::webkit-details-marker ). デフォルトのマーカースタイルを完全に無効にするためには、次のようにします.

summary {
    list-style-type: none;
}

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

まだかなり無痛!details また、便利な付属していますopen カスタムテキストをアニメーション化することができます.Here’s a simple, if impractical, example on codepen .

制限

キャッチは常にあります.中<details> and <summary> 素晴らしいプロジェクトの多くのボックスソリューションです.考慮すべき例外がいくつかあります.

いいえIEサポート

私はあなたが推測することができると確信して、これはInternet Explorerの任意のバージョンでは使用できません.あなたはまだIE 11をサポートする必要がある場合は、カスタムソリューションを考え出す必要があります.

カスタマイズアニメーション

我々がカスタム解決に転向する主な理由の1つは、特定のUI要件のためです私たちはしばしば、その隠されたテキストを拡張するときに優雅にビューにスライドします.残念ながら、かなり簡単にマーカーの外観を変更することができますが、実際のテキストをあまりにも多くのことを行うことができなくなりますいくつかの余分なJavaScriptなしで遷移を明らかにする.

アクセシビリティ

ほとんどの場合、このコンポーネントはボックスからかなりアクセス可能ですあなたはキーボードを使用して、それを処理することができますsummary ボタンとして要素.しかし、Hassel Inclusion discovered 2019年の要素のテストにおいて、明らかにされたテキストは常にスクリーン読者によって正しく発表されないので、見当違いのユーザーは彼らのボタンプレスが実際にしたことを知らないかもしれません.これを回避する方法としては、拡張テキストが拡張されたときに拡張されたテキストをライブ領域にするための余分なマークアップと小さなJavaScriptを追加するか、あるいは新しいテキストへの拡張にフォーカスを移すことができるかもしれません.ただし、基本的にカスタムコンポーネントを作成しています.
この投稿は私のサイトから