Comment créer des divisions pliables avec `` et `` HTML5 ?

"Comment créer des div pliables à l'aide de HTML et CSS"

Les div pliables sont couramment utilisés pour présenter du contenu dynamique et organisé sur une page Web. . En règle générale, ces div contiennent un en-tête et un corps caché qui peuvent être développés et réduits lors de l'interaction de l'utilisateur. Créer des divs pliables uniquement avec CSS peut être pratique, en particulier pour maintenir une base de code propre et simple.

La pseudo-classe cible

Approches antérieures des divs pliables CSS impliquées en utilisant la pseudo-classe :target, qui active les styles lorsqu'un élément spécifique est lié par un attribut cible (par exemple, ). Cependant, cette technique nécessite une répétition importante pour plusieurs éléments réductibles, ce qui entraîne un code CSS volumineux.

Le HTML5

et Balises

Une solution alternative et élégante réside dans le HTML5 et balises. Le L'élément représente l'en-tête basculable, tandis que l'élément L’élément encapsule le contenu réductible. Cette approche élimine le besoin de JavaScript personnalisé ou de CSS complexe, simplifiant considérablement le processus de création de div pliables.

Exemple de code

Voici un exemple pour démontrer l'utilisation de < ;détails> et  :

<code class="html"><details>
  <summary>This is the collapsible header</summary>
  <div class="content">This is the collapsible body</div>
</details></code>

Compatibilité avec les navigateurs

Alors que les et les balises offrent une solution pratique, la compatibilité du navigateur doit être prise en compte. Ils sont pris en charge dans les navigateurs modernes, notamment Chrome, Firefox et Safari ; cependant, tous les navigateurs ne peuvent pas l'afficher avec le même comportement.

Pour une prise en charge étendue du navigateur, si nécessaire, vous pouvez utiliser un polyfill comme details-polyfill.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!