Pure CSS collapse / expand div

J’ai un div effaçable CSS pur qui est basé sur le code de quelqu’un d’autre qui utilise la classe de support :target . Ce que j’essaye de mettre en place est une page avec plus de 12 questions, et lorsque vous cliquez sur le bouton +, la réponse div est agrandie en dessous. Je ne peux pas comprendre comment créer plusieurs éléments div sur cette page sans écrire une tonne de CSS supplémentaire. Quelqu’un a des suggestions sur la façon d’écrire ceci afin que mon code CSS soit réduit au minimum? (c.-à-d. que je n’ai pas à entrer un tas de sélecteurs uniques pour chacune des 12 questions).

Je ne peux pas utiliser Javascript car cela se passe sur un site wordpress.com qui n’autorise pas JS.

Voici mon jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/

 
+ -
Question Question Question Question Question Question Question Question Question Question Question?

Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer

 /* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */ .FAQ { vertical-align: top; height:auto !important; } .list { display:none; height:auto; margin:0; float: left; } .show { display: none; } .hide:target + .show { display: inline; } .hide:target { display: none; } .hide:target ~ .list { display:inline; } /*style the (+) and (-) */ .hide, .show { width: 30px; height: 30px; border-radius: 30px; font-size: 20px; color: #fff; text-shadow: 0 1px 0 #666; text-align: center; text-decoration: none; box-shadow: 1px 1px 2px #000; background: #cccbbb; opacity: .95; margin-right: 0; float: left; margin-bottom: 25px; } .hide:hover, .show:hover { color: #eee; text-shadow: 0 0 1px #666; text-decoration: none; box-shadow: 0 0 4px #222 inset; opacity: 1; margin-bottom: 25px; } .list p{ height:auto; margin:0; } .question { float: left; height: auto; width: 90%; line-height: 20px; padding-left: 20px; margin-bottom: 25px; font-style: italic; } 

Selon les navigateurs / périphériques que vous souhaitez prendre en charge ou ce que vous êtes prêt à accepter pour les navigateurs non conformes, vous pouvez consulter les balises

et . Ils sont exactement dans ce but. Aucun css n’est requirejs car le regroupement et l’affichage font partie de la définition / mise en forme des balises.

J’ai fait un exemple ici :

 
This is what you want to show before expanding

This is where you put the details that are shown once expanded

Le support du navigateur varie. Essayez le webkit pour obtenir les meilleurs résultats. Les autres navigateurs peuvent afficher par défaut toutes les solutions. Vous pouvez peut-être revenir à la méthode masquer / afficher décrite ci-dessus.

Vous avez juste besoin d’itérer les ancres dans les deux liens.

 + - 

Voir ce jsfiddle http://jsfiddle.net/eJX8z/

J’ai également ajouté une marge à l’appel de la FAQ pour améliorer le format.

Utilisation de

et

L’utilisation des éléments

et

est la plus simple, mais la prise en charge du navigateur est interdite car IE actuel ne le prend pas en charge. Vous pouvez cependant polyfill (la plupart sont basés sur jQuery). Notez que le navigateur non pris en charge affichera simplement la version développée, ce qui peut être acceptable dans certains cas.

 /* Optional styling */ summary::-webkit-details-marker { color: blue; } summary:focus { outline-style: none; } 
 
Summary, caption, or legend for the content Content goes here.

Ou une version super simple avec à peine n’importe quel css 🙂

  

http://jsfiddle.net/ionko22/4sKD3/

La réponse de @gbtimmon est géniale, mais beaucoup trop compliquée. J’ai simplifié son code autant que possible.

 #answer, #show, #hide:target { display: none; } #hide:target + #show, #hide:target ~ #answer { display: initial; } 
 Show Hide 

Answer