純粋な HTML と CSS を使用して折りたたみ可能な DIV を作成するにはどうすればよいですか?

HTML、CSS を使用した折りたたみ可能な DIV

jQuery に依存せずに、非表示および折りたたみ可能な DIV 要素を作成する方法をお探しですか?この問題は、モバイル Web サイトのデザイン、特にオフライン アクセスが重要な場合によく発生します。純粋な HTML と CSS を使用すると、この機能を実現できます。

解決策:

HTML5 の <詳細> を使用します。 <概要>タグは実行可能な解決策です。

<details>
  <summary>Collapse 1</summary>
  <p>Content 1...</p>
</details>
<details>
  <summary>Collapse 2</summary>
  <p>Content 2...</p>
</details>

このアプローチは、追加の JavaScript や CSS スタイルを必要とせずに、HTML5 のネイティブ機能を活用します。

タグは折りたたみ可能なコンテナを表します。タグはその対話型ヘッダーを定義します。 <概要>をクリックすると、タグは、

内のコンテンツの表示/非表示を切り替えます。タグ。

以上が純粋な HTML と CSS を使用して折りたたみ可能な DIV を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。