Compression/déploiement de div en CSS pur

Question

J'ai un div rétractable en pure CSS qui est basé sur le code de quelqu'un d'autre qui utilise l'attribut :target psuedoclass. Ce que j'essaie de mettre en place, c'est une page avec plus de 12 questions, et lorsque vous cliquez sur le bouton +, le div de réponse se développe en dessous. Je n'arrive pas à trouver le moyen de créer plusieurs éléments div qui s'effondrent sur cette page sans écrire une tonne de CSS supplémentaires. Quelqu'un a-t-il des suggestions sur la façon d'écrire ceci de manière à ce que mon code CSS soit réduit au minimum ? (c'est-à-dire que je n'ai pas à saisir un grand nombre de sélecteurs uniques pour chacune des 12+ questions).

Je ne peux pas utiliser Javascript puisque le site est hébergé sur un site wordpress.com qui n'autorise pas JS.

Voici mon 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;
}

Answer 1

En fonction des navigateurs/appareils que vous souhaitez prendre en charge, ou de ce que vous êtes prêt à supporter en cas de navigateurs non conformes, vous pouvez consulter le site Web de la Commission européenne. <summary> y <detail> tags. Elles servent exactement à cela. Aucune css n'est nécessaire puisque le regroupement et l'affichage font partie de la définition/du formatage des balises.

J'ai fait un exemple aquí :

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

La prise en charge des navigateurs varie. Essayez en webkit pour de meilleurs résultats. D'autres navigateurs peuvent afficher par défaut toutes les solutions. Vous pouvez éventuellement utiliser la méthode de masquage/affichage décrite ci-dessus.

Answer 2

Utilisation de <summary> y <details>

Utilisation de <summary> y <details> est le plus simple mais voir Support du navigateur car l'IE actuel ne le supporte pas. Vous pouvez polyfill (la plupart sont basés sur jQuery). Notez que les navigateurs non pris en charge afficheront simplement la version étendue, ce qui peut être acceptable dans certains cas.

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

Voir aussi comment coiffer le <details> élément (HTML5 Doctor) (un peu délicat).

Pure CSS3

El :target Le sélecteur a une assez bonne Support du navigateur et il peut être utilisé pour faire un simple élément pliable à l'intérieur du cadre.

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

Answer 3

La réponse de @gbtimmon est génial, mais beaucoup, beaucoup trop compliqué. J'ai simplifié son code autant que j'ai pu.

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

Answer 4

Il suffit d'itérer les ancres dans les deux liens.

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

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

J'ai également ajouté un peu de marge à l'appel FAQ pour améliorer le format.

Answer 5

Ou une version super simple avec presque aucune 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/