div per klick auf- bzw. zuklappen

[habichtfreak]

hallo,

ich möchte folgendes mit html+css realisieren: es soll eine liste (keine li elemente) mit terminen entstehen. diese sind chronologisch geordnet und stehen untereinander. sieht so aus:



zu jedem termin gibt es weitere infos, die durch klicken auf den jeweiligen eintrag eingeblendet werden soll (erneutes klicken führt zum zuklappen). das funktioniert bereits und sieht so aus:



jetzt zu meinem problem: klicke ich auf den zweiten termin, sollten die infos zu diesem termin ausklappen, es öffnet/schließt sich aber immer der erste verborgene container. da ich den klappmechanismus einfach übernommen habe (von hier), weiß ich nicht was ich ändern muss, damit das gewünschte ergebnis entsteht.

Spoiler

der relevante html teil:

			<div id="monat"><h4>Januar</h4>
				<div class="toggleBox1">
				    <input name="toggleContent" id="toggleContent" type="checkbox">
				    <label for="toggleContent" class="open">03.-04.01.2015: 7. Magdeburger Oldtimer- und Teilemarkt</label>
				    <label for="toggleContent" class="close">03.-04.01.2015: 7. Magdeburger Oldtimer- und Teilemarkt</label>
				    <div>
				        <p>Hier steht ein toller Inhalt, der beliebige Elemente enthalten kann:</p>

				    </div>
				</div>
			</div>
			<div id="monat"><h4>April</h4>
				<div class="toggleBox2">
				    <input name="toggleContent" id="toggleContent" type="checkbox">
				    <label for="toggleContent" class="open">03.-06.04.2015: 14. Int. Harzer Oldtimertreffen</label>
				    <label for="toggleContent" class="close">03.-06.04.2015: 14. Int. Harzer Oldtimertreffen</label>
				    <div>
				        <p>Hier steht ein toller Inhalt, der beliebige Elemente enthalten kann:</p>

				    </div>
				</div>
			</div>

Spoiler

der relevante css teil:

.toggleBox1,
.toggleBox2 {
position: relative;
border: 1px solid #63adf8;
border-radius: 15px;
}

/* Ausblenden des input-Feldes */
.toggleBox1 input,
.toggleBox2 input {
position: absolute;
left: -99999px;
}

/* Gestaltung der labels */
.toggleBox1 label,
.toggleBox2 label {
display: block;
background: #63adf8;
border-radius: 14px;
color: #fff;
padding: .4em;
text-align: left;
cursor: pointer;
}

.toggleBox1 label:hover,
.toggleBox2 label:hover {
background: #e6e8ea;
color: #63adf8;
}

/* Der Aufklappmechanismus */
.toggleBox1 input:not(:checked) ~ div,
.toggleBox2 input:not(:checked) ~ div {
opacity: 0;
height: 0;
}

.toggleBox1 input:checked ~ div,
.toggleBox2 input:checked ~ div {
opacity: 1;
padding: .8em;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}

/* Steuerung der Sichtbarkeit der labels */
.toggleBox1 input:not(:checked) ~ .close,
.toggleBox2 input:not(:checked) ~ .close,
.toggleBox1 input:checked ~ .open,
.toggleBox2 input:checked ~ .open {
display: none;
}

mfg hb

 

[Daaron]

Ohne jetzt das ganze CSS zu lesen, sehe ich direkt im HTML-Code schon gravierende Fehler:
Du verwendest IDs mehrfach, was einfach nicht erlaubt ist und zu schwerem Fehlverhalten führen kann. ID => eindeutiger Identifikator. Dasselbe gilt übrigens auch für "name".

 

[Umbel]

Wie Daaron schon festgestellt hat. Dein Code kommt durcheinander weil die relevante Checkbox mehrfach "vorhanden" ist.

 

[JanKrohn]

Lies Dich mal in Twitter Bootstrap ein. Warum alles selbst aufbauen, wenn es es das passende Framework gibt, wo Du es mit 4 Zeilen Code hinbekommst.

 

[gloecki]

Guten Abend,

Sollte doch mit JQuery oder JavaScript recht einfach realisierbar sein.

Einfach mal googlen.

Gruß Glöcki

 

[habichtfreak]

ich hab die ids durchnummeriert, dann gings. danke für den tipp.

Sollte doch mit JQuery oder JavaScript recht einfach realisierbar sein.

bestimmt geht das, aber es gibt leute die deaktivieren das. außerdem hab ich von js keinen blassen schimmer, von css verstehe ich wenigstens ein bisschen.