Ich habe ein reines kollabierbares CSS-Div, das auf dem Code eines anderen basiert, der die :target
Pseudoklasse 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;
}
quelle
Antworten:
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 :
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.
quelle
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.Siehe auch Stylen des
<details>
Elements (HTML5 Doctor) (etwas knifflig).Reines CSS3
Der
:target
Selektor hat eine ziemlich gute Browserunterstützung und kann verwendet werden, um ein einzelnes zusammenklappbares Element innerhalb des Rahmens zu erstellen .quelle
<summary>
und<details>
funktionieren immer noch nicht in allen gängigen Browsern.@ gbtimmons Antwort ist großartig, aber viel zu kompliziert. Ich habe seinen Code so weit wie möglich vereinfacht.
quelle
hide2
,show2
,answer2
zum Beispiel). Oder Klassen, das spielt keine Rolle.Sie müssen nur die Anker in den beiden Links iterieren.
Siehe diese jsfiddle http://jsfiddle.net/eJX8z/
Ich habe dem FAQ-Aufruf auch einen gewissen Spielraum hinzugefügt, um das Format zu verbessern.
quelle
Oder eine super einfache Version mit kaum CSS :)
http://jsfiddle.net/ionko22/4sKD3/
quelle