Toggle-Box CSS alles erweitern

Question

Ich habe eine Seite mit dem folgenden Code für die Minimierungsfunktion erstellt, um Fragen hinzuzufügen, ich muss nur HTML hinzufügen und Header-Nummer ändern.

Gibt es eine Möglichkeit, einen Klick hinzuzufügen, um alle Schaltflächen auf diese Einstellung zu erweitern?

Vielen Dank

CSS

<style> 
.toggle-box { 
display: none; 
} 
.toggle-box + label { 
cursor: pointer; 
display: block; 
float: left; 
font-weight: bold; 
line-height: 21px; 
margin-bottom: 10px; 
color: #000000; 
width: 99%; 
border-radius: 10px; 
border: 3px solid #006534; 
padding: 5px 5px 5px 5px; 
background: green; /* For browsers that do not support gradients */ 
background: -webkit-linear-gradient(left, white, white, #006534); /* For Safari 5.1 to 6.0 */ 
background: -o-linear-gradient(right, white, white, #006534); /* For Opera 11.1 to 12.0 */ 
background: -moz-linear-gradient(right, white, white, #006534); /* For Firefox 3.6 to 15 */ 
background: linear-gradient(to right, white, white, #006534); /* Standard syntax (must be last) */ 
} 
.toggle-box + label + div { 
display: none; 
margin-bottom: 10px; 
} 
.toggle-box:checked + label + div { 
display: block; 
} 
.toggle-box + label:before { 
background-color: #000000; 
-webkit-border-radius: 10px; 
-moz-border-radius: 10px; 
border-radius: 10px; 
color: #FFFFFF; 
content: "+"; 
display: block; 
float: left; 
font-weight: bold; 
height: 20px; 
line-height: 20px; 
margin-left: 5px; 
margin-right: 5px; 
text-align: center; 
width: 20px; 
} 
.toggle-box:checked + label:before { 
content: "\2212"; 
} 
</style> 

html

<input class="toggle-box" type="checkbox" id="header1"> 
<label for="header1"> 
<span style="FONT-SIZE: 16px"><font color="#006534">question 1</font></span> 
</label> 
Content1 

<input class="toggle-box" type="checkbox" id="header2"> 
<label for="header2"> 
<span style="FONT-SIZE: 16px"><font color="#006534">question 2</font></span> 
</label> 
Content2 

Answer 1

Fall A.#expandAll nicht markiert ist und klicken Sie ein einzelnes Element. Sie haben

• #expandAllungeprüft + individuelle Toggle geprüft und Sie erwarten, dass der Artikel geöffnet sein.

Fall B.#expandAll aktiviert ist, wird einzelne Artikel auch überprüft und Sie #expandAll klicken, werden alle offenen Posten erwartet zu schließen, so dass Sie

• #expandAllungeprüft + individuelle Toggle haben geprüft und erwarten Sie, dass der Artikel geschlossen wird.

Nicht möglich mit CSS allein. Um zu arbeiten, muss #expandall die einzelnen Elemente aktivieren/deaktivieren. Alle von ihnen. Und in CSS können Sie nicht mehr als ein Element auf ein Ereignis ausrichten: Das Ereignis wird vom ersten Ziel konsumiert (Sie können zum Beispiel keine echte Verknüpfung (href) und die Check/Unlock-Funktion für dasselbe Element - klicken) wird von einem von ihnen konsumiert werden). Sie benötigen javascript für mehrere Ziele/Ereignisse.