CSS puro collasso / espansione div

Ho un div pieghevole CSS puro che è basato sul codice di qualcun altro che usa il :target psuedoclass. Quello che sto cercando di impostare è una pagina con 12+ domande e quando fai clic sul pulsante + la risposta div si espande al di sotto. Non riesco a capire come creare più elementi div compressi in questa pagina senza scrivere una tonnellata di CSS extra. Qualcuno ha suggerimenti su come scrivere questo così il mio codice CSS è ridotto al minimo? (cioè, quindi non devo inserire un gruppo di selettori unici per ciascuna delle 12 domande).

Non posso usare Javascript poiché questo sta succedendo su un sito wordpress.com che non consente JS.

Ecco il mio 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; } 

A seconda di quali browser / dispositivi stai cercando di supportare o di cosa sei disposto a tollerare per i browser non conformi, potresti voler controllare i

e . Sono esattamente per questo scopo. Non è richiesto alcun css poiché il collasso e la visualizzazione fanno parte della definizione / formattazione dei tag.

Ho fatto un esempio qui :

 
This is what you want to show before expanding

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

Il supporto del browser varia. Prova nel webkit per ottenere i migliori risultati. È ansible che altri browser visualizzino automaticamente tutte le soluzioni. Puoi forse ricorrere al metodo hide / show sopra descritto.

Hai solo bisogno di iterare le ancore nei due link.

 + - 

Vedi questo jsfiddle http://jsfiddle.net/eJX8z/

Ho anche aggiunto qualche margine alla chiamata FAQ per migliorare il formato.

Usando

e

L’utilizzo degli elementi

e

è il più semplice, ma si veda il supporto del browser in quanto l’attuale IE non lo supporta. Puoi eseguire il polyfill (la maggior parte sono basati su jQuery). Nota che il browser non supportato mostrerà semplicemente la versione espansa, ovviamente, in alcuni casi potrebbe essere accettabile.

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

O una versione super semplice con quasi nessun css 🙂

  

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

La risposta di @gbtimmon è ottima, ma molto, troppo complicata. Ho semplificato il suo codice per quanto potrebbe essere.

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

Answer