アコーディオンのHTML5詳細要素

Question

アコーディオンをマークアップするには、詳細要素が意味的に適切ですか？

例：

<div class="accordion"> 

<details open> 
<summary>Section 1</summary> 
</details> 

<details> 
<summary>Section 2</summary> 
</details> 

<details> 
<summary>Section 3</summary> 
</details> 

</div> 

仕様は、その使用状況について非常に明確ではありませんので、私はこの質問を。これは、details要素が公開ウィジェットであることを示しています。 私は確かにそれが意図されていない何かのために要素を使用したくないです。このような

EDIT

しまう何かがより良い意味的に適していますか？

<article role="tablist"> 

<header role="tab" aria-expanded>Section 1</header> 
<div role="tabpanel"> 
</div> 

<header role="tab">Section 2</header> 
<div role="tabpanel"> 
</div> 

<header role="tab">Section 3</header> 
<div role="tabpanel"> 
</div> 

</article> 

ありがとうございます！

Answer 1

は、このために<details>使用しないでください、またはあなたがこの問題を持っています。おそらくあなたのアコーディオンのための動作を望まないです

Insane Chrome issue...Chrome renders twisties?

。

Answer 2

はい、<details><summary>要素はあなたが記述しているもののために（と最もセマンティックオプション）完全に適しています

をhttp://www.w3.org/html/wg/drafts/html/master/interactive-elements.html#the-details-elementから：

詳細要素が開示を表しウィジェット ユーザーはです。addiまたはコントロール。 [重点鉱山]

そして、これがhttp://html5doctor.com/the-details-and-summary-elements/からである：

基本的に、我々は、ユーザーが開閉を切り替えることができアコーディオン状のウィジェットを作成するために使用することができます。内部では、私たちが望むあらゆる種類のコンテンツを置くことができます。

パーフェクト使用。例えば、私の会社は、多くの接触オプションでコンタクトページを持っているので、私たちでしセットアップそうのようなそれのためのアコーディオン：

<details> 
    <summary>Mailing Address</summary> 
    <p><strong>U.S. Correspondence:</strong> 123 Main St., Washington, DC 00000-0000</p> 
    <p><strong>International Correspondence:</strong> P.O.Box 1111, Washington, DC 00000-1111</p> 
</details> 
<details> 
    <summary>Phone Numbers</summary> 
    <p><strong>U.S.:</strong> 800-555-5555</p> 
    <p><strong>Int'l:</strong> +1-800-555-5556</p> 
</details> 

スタイリング上の注意事項：良い意味論は、ブラウザ固有のスタイルに対処するために船外に投げすべきではありません問題。 A CSS Resetが整然としたかもしれませんが、アコーデオンにこれらの有用で適切な要素を使用しない意味上の理由はありません。

** Do note： Chromeは、現在のところ、これらの要素を意図した仕様と思われるトグル機能をサポートする唯一のブラウザです。 Javascript fallbackはここで便利です。

**編集3/2017 - サポート表についてはhttp://caniuse.com/#feat=detailsを参照してください。この機能はIEとEdge以外のほとんどすべてでサポートされています。