Comment créer plusieurs divisions pliables en CSS pur sans code étendu ?

Divs pliables en CSS pur : minimiser le code pour plusieurs éléments

Question :

En CSS pur, comment pouvez-vous créer plusieurs éléments div pliables sans écrire de code détaillé pour chaque élément ?

Contexte :

Le code fourni utilise la pseudoclasse :target pour réduire et développer un seul div. Cependant, la nécessité de créer de nombreux éléments div similaires nécessite une grande quantité de CSS.

Solution :

Une approche alternative consiste à utiliser la méthode

et Balises HTML, spécialement conçues pour cette fonctionnalité.

Détails :

•  : contient le texte qui apparaît avant de développer les détails.
•  : Enferme le contenu détaillé initialement masqué.

En imbriquant ces balises, vous pouvez facilement créer des sections extensibles sans aucun CSS :

<code class="html"><details>
  <summary>This is what you want to show before expanding</summary>
  <p>This is where you put the details that are shown once expanded</p>
</details></code>

Prise en charge du navigateur :

La prise en charge du navigateur varie. Webkit (par exemple Safari, Chrome) offre les meilleurs résultats. Dans d'autres navigateurs, les détails peuvent toujours être affichés.

Retour :

Si

et les balises ne sont pas prises en charge, pensez à utiliser la méthode hide/show avec des sélecteurs CSS étendus.

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!