コンテンツを非表示または表示するためのアコーディオンの [もっと読む/もっと少なく読む] ボタンを非常に簡単に作成するためのネイティブ HTML5 ソリューションがあることをご存知でしたか? JavaScript または CSS なし。 方法を見つけるために読んでください。
& HTML5 タグは正式に 開示ウィジェット要素しかし、 とペアになった HTML5タグはあなたに 純粋な HTML のみのアコーディオン.
意味 JS または CSS なし が必要です。 なんてクールだ！
これは、単純な要素を示す例です。 & .
これがコードです：
<details>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>これがどのように見えるかです：
続きを読む
これは、コンテンツの表示と非表示を切り替えるネイティブ HTML5 アコーディオンです。 かなりクールですよね？
システムを教えてください。 タグは、開いたり閉じたりできる要素のラッパーとして機能します。 ユーザーはラベルをクリックする必要があります。 要素を開閉するタグ。
スタイルと行動はどうですか？
スタイル
CSS スタイルを適用して、リビール テキスト ボックスの外観をカスタマイズできます。 以下は、タブ付きのインターフェイス スタイルです。
details {
font: 16px "Open Sans", Calibri, sans-serif;
width: 620px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: #ddd;
border: none;
box-shadow: 3px 3px 4px black;
cursor: pointer;
}
details > p {
border-radius: 0 0 10px 10px;
background-color: #ddd;
padding: 2px 6px;
margin: 0;
box-shadow: 3px 3px 4px black;
}
details[open] > summary {
background-color: #ccf;
}デフォルトでは、カーソルは矢印のように表示されますが、 指差し手 代わりにこれを使用します：
details {
cursor: pointer;
}行動
動作の設定は非常に限られています。実際にできることは XNUMX つだけです。それは、表示されたテキストを作成することです。 デフォルトで開く.
開いた状態でアコーディオンを開始するには、ブール値を追加します 開いた 属性を タグ：
<details open>
<summary>Read More</summary>
<p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>続きを読む
これは、コンテンツの表示と非表示を切り替えるネイティブ HTML5 アコーディオンです。 かなりクールですよね？
どの属性を使用できますか?
以下の属性は、 タグ：
| 属性 | 値 | まとめ |
|---|---|---|
| 開いた | 開いた | デフォルトは 開いていません. |
| id | 値 | 一意の識別子を提供します。 |
| class | クラス名 | 要素にクラス名を割り当てます。 |
| CSS 値 | 要素に CSS スタイルを割り当てます。 |
では、制限は何ですか？ 常にキャッチがありますね。
Internet Explorer のサポートなし
この HTML5 専用のアコーディオンは、どのバージョンの Internet Explorer でも機能しません。 IE11 をサポートする必要がある場合は、JQuery を使用した別のフォールバック ソリューションを使用する必要があります。 他のすべてのブラウザーのサポート & .
カスタマイズされたアニメーションやトランジションはありません
(上記のように) 外観を変更してスタイルを設定することはできますが、テキスト表示のアニメーションやトランジションを行うことはできません。 それを行いたい場合は、別の CSS/JSS アコーディオン ソリューションが必要になります。
スクリーン リーダーとアクセシビリティ
これはネイティブです HTML5 アクセス可能であるべきですが、実際に表示されたテキストがスクリーン リーダーによって常に正しく読み上げられるとは限らないことがわかっています。
参照：
