Pure CSS reduzieren / erweitern div

87

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;
}
dmarvs
quelle
6
Wenn jemand dies ohne WordPress sieht, kann ich bitte sagen, BITTE TUN SIE DAS NICHT. Es ist ein Hack und es bricht die Back-Funktionalität einer Seite, was super nervig ist.
Gbtimmon

Antworten:

102

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.

Thurstan
quelle
1
Fehler 591737 ist der Fehler, der die Unterstützung in Firefox verfolgt.
ShreevatsaR
9
Es ist fast Mitte 2016 und es gibt keine Unterstützung dafür. Verwenden Sie diese Lösung auf keinen Fall.
Dwayne Charrington
3
@DigitalSea-Unterstützung "nicht vorhanden" ist falsch und "Diese Lösung definitiv nicht verwenden" sind starke Worte für einen Standard, der seit mehreren Jahren stabil ist und seit 2010 eine Polyfüllung zur Verfügung hat. Mathiasbynens.be/notes/html5-details- jquery . Was ist die Grundlage für Ihre Argumentation? MS Edge wird diese Tags wahrscheinlich bald implementieren. Firefox hat Zusammenfassungs- / Detail-Tags implementiert (hat sie derzeit jedoch hinter einem Flag). Webkit unterstützt sie standardmäßig seit Chrome 12, ebenso wie Safari auf von OS X und iOS Blink abgeleiteten Browsern - Chrome Mobile / Desktop, Oper unterstützt es als Standard
Thurstan
1
@ Thurstan Keine Unterstützung in; IE8, IE9, IE10, IE11, Edge 13, keine Unterstützung in Firefox bis August 2016. Wenn Sie also nicht den Luxus haben, auf die Unterstützung von IE vollständig zu verzichten und derzeit Edge und Firefox, ja, nicht gut unterstützt. Die Polyfüllung macht im Wesentlichen das, was Sie bereits mit Javascript (ohne jQuery) und recht effizient tun können. Eine Polyfüllung für diese einfach zu implementierende Funktion ist Overkill. Die von Ihnen verknüpfte Lösung verwendet jQuery, was nicht erforderlich ist. Es würde mich nicht wundern, wenn wir dies sowieso eines Tages aus der Spezifikation entfernen würden.
Dwayne Charrington
4
Ich entwickle nur für moderne Browser und diese Technik funktionierte perfekt für meinen Anwendungsfall und erforderte kein bisschen CSS!
Josh Habdas
39

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>

Wernight
quelle
1
<summary>und <details>funktionieren immer noch nicht in allen gängigen Browsern.
Neurotransmitter
3
@TranslucentCloud Das habe ich gesagt. ;)
Wernight
Und auch dies wurde vom Autor der anderen Antwort gesagt.
Neurotransmitter
1
Gibt es überhaupt eine Möglichkeit, eine Übergangsanimation hinzuzufügen?
Aziz Javed
1
Eine animierte Version, in der der Text mithilfe des CSS-Übergangs nach unten
verschoben und eingeblendet wird
23

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

Neurotransmitter
quelle
3
Die Arbeit mit CSS3 ist manchmal so lohnend :-)
mrmut
Dies funktioniert nicht, wenn es mehrmals auf derselben Seite verwendet wird: Das Klicken auf Ausblenden / Anzeigen wirkt sich auf alle Divs aus. Weiß jemand, wie man es so modifiziert, dass es funktioniert, wenn es mehr als einmal verwendet wird?
Phhu
Update: @Wernights CSS antwortet nur unten ("Pure CSS3", ähnliches CSS, aber mit Klassen). funktioniert mit mehreren divs auf derselben seite.
Phhu
1
@phhu ja, es wird nicht funktionieren, wenn Sie die gleichen IDs wiederverwenden. Es wird funktionieren , wenn Sie anderen Satz von IDs einführen werden ( hide2, show2, answer2zum Beispiel). Oder Klassen, das spielt keine Rolle.
Neurotransmitter
21

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.

gbtimmon
quelle
Danke dir! Ich hatte das versucht, aber aus irgendeinem Grund würde es bei mir nicht funktionieren. Muss einen Fehler gehabt haben, den ich nie gefangen habe.
Dmarvs
17

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/

Ionko Gueorguiev
quelle
Übrigens vergessen zu erwähnen: Ziel funktioniert nicht in IE8 oder älter, Überraschung Überraschung! Und CSS PIE hilft auch nicht dabei, daher sollten Sie sich eine jQuery-Option ansehen, wenn die Browserkompatibilität für Sie von Interesse ist.
Ionko Gueorguiev
Danke, das ist viel sauberer. Etwa ein Drittel unserer potenziellen Zielgruppe wird IE8 sein. Ich dachte daran, nur ein bedingtes CSS hinzuzufügen, das nur alle Divs beim Laden öffnet.
Dmarvs
Ich denke, eine Oberfläche mit Registerkarten könnte die richtige Lösung für Sie sein. Ich habe es vor einiger Zeit gemacht . Sie können es hier herunterladen / überprüfen: ionko.com/index.php/work/simple-and-flexible-tabs .
Ionko Gueorguiev