web-dev-qa-db-fra.com

Pure CSS collapse / expand div

J'ai un div collapsable CSS pur qui est basé sur le code de quelqu'un d'autre qui utilise la classe :target. Ce que je suis en train de créer est une page avec plus de 12 questions, et lorsque vous cliquez sur le bouton +, la réponse se développe en dessous. Je ne peux pas comprendre comment créer plusieurs éléments div en réduction sur cette page sans écrire une tonne de CSS supplémentaire. Quelqu'un a des suggestions sur la façon d'écrire cela pour que mon code CSS soit minimisé? (i.e., je n'ai donc pas besoin de saisir un groupe de sélecteurs uniques pour chacune des 12 questions ou plus).

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/

<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;
}
csscss3collapsable
78
dmarvs

Selon les navigateurs/appareils que vous souhaitez prendre en charge ou ce que vous êtes prêt à accepter pour les navigateurs non conformes, vous pouvez vérifier les balises <summary> et <detail>. Ils sont exactement dans ce but. Aucun css n'est requis car la réduction et l'affichage font partie de la définition/du formatage des balises.

J'ai fait un exemple ici :

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

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

89
Thurstan

Utiliser <summary> et <details>

Utiliser les éléments <summary> et <details> est le plus simple, mais voyez support du navigateur , car IE actuel ne le prend pas en charge. Vous pouvez polyfill cependant (la plupart sont basés sur jQuery). Notez que les navigateurs non pris en charge afficheront bien sûr 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;
}
<details>
  <summary>Summary, caption, or legend for the content</summary>
  Content goes here.
</details>

Voir aussi comment styliser l'élément <details> (HTML5 Doctor) (un peu compliqué).

CSS3 pur

Le sélecteur :target a un très bon support du navigateur , et il peut être utilisé pour créer un élément pliable simple dans le 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>
29
Wernight

Il vous suffit de parcourir les ancres dans les deux liens.

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

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

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

21
gbtimmon

Ou une version super simple avec à peine n'importe quel 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/

17
Ionko Gueorguiev

La réponse de @ gbtimmon est excellent, mais beaucoup trop compliqué. J'ai simplifié son code autant que possible.

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