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

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

Ecco il mio jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/

<div class="FAQ">
    <a href="#hide1" class="hide" id="hide1">+</a>
    <a href="#show1" class="show" id="show1">-</a>
    <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div>
        <div class="list">
            <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p>
        </div>
</div>

/* 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 dei browser / dispositivi che stai cercando di supportare o di ciò che sei disposto a sopportare per i browser non conformi, potresti voler controllare i tag <summary>e <detail>. Sono esattamente per questo scopo. Non è richiesto alcun CSS poiché la compressione e la visualizzazione fanno parte della definizione / formattazione dei tag.

Ho fatto un esempio qui :

<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>

Il supporto del browser varia. Prova in webkit per ottenere i migliori risultati. Altri browser potrebbero mostrare automaticamente tutte le soluzioni. Puoi forse fare il fallback al metodo nascondi / mostra descritto sopra.

Utilizzando <summary>e<details>

L'utilizzo degli elementi <summary>e <details>è il più semplice, ma vedi il supporto del browser poiché l'attuale IE non lo supporta. Puoi polyfill però (la maggior parte sono basati su jQuery). Tieni presente che il browser non supportato mostrerà semplicemente la versione espansa ovviamente, quindi potrebbe essere accettabile in alcuni casi.

/* Optional styling */
summary::-webkit-details-marker {
  color: blue;
}
summary:focus {
  outline-style: none;
}

<details>
  <summary>Summary, caption, or legend for the content</summary>
  Content goes here.
</details>

Vedi anche come applicare uno stile <details>all'elemento (HTML5 Doctor) (un po 'complicato).

CSS3 puro

Il :targetselettore ha un supporto browser piuttosto buono e può essere utilizzato per creare un singolo elemento comprimibile all'interno del frame.

.details,
.show,
.hide:target {
  display: none;
}
.hide:target + .show,
.hide:target ~ .details {
  display: block;
}

<div>
  <a id="hide1" href="#hide1" class="hide">+ Summary goes here</a>
  <a id="show1" href="#show1" class="show">- Summary goes here</a>
  <div class="details">
    Content goes here.
  </div>
</div>
<div>
  <a id="hide2" href="#hide2" class="hide">+ Summary goes here</a>
  <a id="show2" href="#show2" class="show">- Summary goes here</a>
  <div class="details">
    Content goes here.
  </div>
</div>

La risposta di @ gbtimmon è fantastica, ma decisamente troppo complicata. Ho semplificato il suo codice il più possibile.

#answer,
#show,
#hide:target {
    display: none; 
}

#hide:target + #show,
#hide:target ~ #answer {
    display: inherit; 
}

<a href="#hide" id="hide">Show</a>
<a href="#/" id="show">Hide</a>
<div id="answer"><p>Answer</p></div>

Hai solo bisogno di iterare gli ancoraggi nei due collegamenti.

<a href="#hide2" class="hide" id="hide2">+</a>
<a href="#show2" class="show" id="show2">-</a>

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

Ho anche aggiunto un po 'di margine alla chiamata delle FAQ per migliorare il formato.

O una versione semplicissima con quasi nessun CSS :)

<style>   
.faq ul li {
    display:block;
    float:left;
    padding:5px;
}

.faq ul li div {
    display:none;
}

.faq ul li div:target {
    display:block;
}


</style>


<div class="faq">
   <ul>
   <li><a href="#question1">Question 1</a>   
   <div id="question1">Answer 1 </div>
   </li>


   <li><a href="#question2">Question 2</a>
   <div id="question2">Answer 2 </div>
   </li>
   <li><a href="#question3">Question 3</a>
   <div id="question3">Answer 3 </div>
   </li>
   <li><a href="#question4">Question 4</a>
   <div id="question4">Answer 4 </div>
   </li>
   <li><a href="#question5">Question 5</a>
   <div id="question5">Answer 5 </div>
   </li>
   <li><a href="#question6">Question 6</a>
   <div id="question6">Answer 6 </div>
   </li>
   </ul>  
</div>

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