Ich habe ein reines kollabierbares CSS-Div, das auf dem Code eines anderen basiert, der die :targetPseudoklasse verwendet. Was ich versuche einzurichten, ist eine Seite mit mehr als 12 Fragen, und wenn Sie auf die Schaltfläche + klicken, wird die Antwort div darunter erweitert. Ich kann nicht herausfinden, wie mehrere kollabierende div-Elemente auf dieser Seite erstellt werden können, ohne eine Menge zusätzliches CSS zu schreiben. Hat jemand Vorschläge, wie man das schreibt, damit mein CSS-Code minimiert wird? (dh, ich muss nicht für jede der 12+ Fragen eine Reihe eindeutiger Selektoren eingeben).

Ich kann Javascript nicht verwenden, da dies auf einer wordpress.com-Site geschieht, die JS nicht zulässt.

Hier ist meine 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;
}

Je nachdem, welche Browser / Geräte Sie unterstützen möchten oder was Sie für nicht kompatible Browser bereit sind, möchten Sie möglicherweise die Tags <summary>und überprüfen <detail>. Sie sind genau für diesen Zweck. Es ist überhaupt kein CSS erforderlich, da das Reduzieren und Anzeigen Teil der Definition / Formatierung von Tags sind.

Ich habe hier ein Beispiel gemacht :

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

Die Browserunterstützung variiert. Versuchen Sie es im Webkit, um die besten Ergebnisse zu erzielen. Andere Browser zeigen möglicherweise standardmäßig alle Lösungen an. Sie können möglicherweise auf die oben beschriebene Methode zum Ausblenden / Anzeigen zurückgreifen.

Verwenden von <summary>und<details>

Die Verwendung von <summary>und <details>Elementen ist am einfachsten, aber siehe Browserunterstützung, da der aktuelle IE sie nicht unterstützt. Sie können jedoch Polyfill (die meisten sind jQuery-basiert). Beachten Sie, dass der nicht unterstützte Browser natürlich nur die erweiterte Version anzeigt, sodass dies in einigen Fällen akzeptabel sein kann.

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

Siehe auch Stylen des <details>Elements (HTML5 Doctor) (etwas knifflig).

Reines CSS3

Der :targetSelektor hat eine ziemlich gute Browserunterstützung und kann verwendet werden, um ein einzelnes zusammenklappbares Element innerhalb des Rahmens zu erstellen .

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

@ gbtimmons Antwort ist großartig, aber viel zu kompliziert. Ich habe seinen Code so weit wie möglich vereinfacht.

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

Sie müssen nur die Anker in den beiden Links iterieren.

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

Siehe diese jsfiddle http://jsfiddle.net/eJX8z/

Ich habe dem FAQ-Aufruf auch einen gewissen Spielraum hinzugefügt, um das Format zu verbessern.

Oder eine super einfache Version mit kaum 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/