Comment puis-je activer/désactiver la visibilité Div avec HTML et CSS uniquement ?

Basculer l'affichage des Divs lors d'un clic à l'aide de HTML et CSS

Dans cet article, nous visons à fournir une solution au défi de afficher et masquer les divs au clic en utilisant des techniques HTML et CSS, sans dépendre des bibliothèques JavaScript comme jQuery.

À l'aide des éléments HTML5

En tirant parti des balises HTML5 détail et résumé, vous pouvez obtenir un div pliable fonctionnalité sans style ni script supplémentaire. Ces balises offrent une prise en charge native pour la création de sections réductibles :

<details><br> <summary>Collapse 1</summary><br> <p>Content 1...</p><br></details><br><details><br> <summary>Réduire 2</summary><br> <p>Contenu 2...</p><br></details><br>

CSS supplémentaire pour le style

Pendant que l'approche ci-dessus gère le comportement pliable, vous souhaiterez peut-être améliorer l'apparence visuelle de votre divisions. Voici un exemple d'extrait CSS :

details {<br> border : 1px solid #ccc;<br> margin-top : 10px;<br> padding : 10px;<br>}<br>résumé {<br> arrière-plan : #eee;<br> curseur : pointeur;<br> remplissage : 5px;<br> affichage : bloc;<br>}<br>summary:hover {<br> arrière-plan : #ccc;<br>}<br>

En implémentant ces techniques, vous pouvez créer efficacement des sections pliables en HTML et CSS, sans avoir besoin de jQuery ou autre JavaScript. bibliothèques.

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!