Spoiler (durch Checkbox)

[BMicraft]

Ich hätte da mal wieder ein kleines Problem:
Ich habe versucht, mit CSS einen Spoiler zu erstellen:
(Bitte kommt mir nicht mit: "Dafür verwendet man aber JS." Ich weiß, aber weil es gehen muss will ich es so machen)

Ich verwende eine versteckte Checkbox, welche aktiviert wird, sobald man auf SPOILER klickt.
Beim bei angehakter Checkbox soll sich per transition ein div auf schieben und nun den Inhalt anzeigen
Habe das bisher so gemacht:

<div id="spoiler">
    <input type="checkbox" id="toggle_visibility_box">
    <label for="toggle_visibility_box" id="toggle_visibility">all versions</label>
    <div id="content">
        <article>
            <p1>1</p1>
            <br />
            <p1>2</p1>
            <br />
            <p1>3</p1>
            <br />
            <p1>4</p1>
            <br />
           <p1>5</p1>
        </article>
    </div>
</div>

nun CSS:

#spoiler {
    background:blue
}
#toggle_visibility_box {
    display: none;
}
#toggle_visibility {
    cursor: pointer;
    background: green;
}
#content {
    height:0px;
    font-size:0px;
    line-height:0px;
    transition:height 2s, font-size 2s, line-height 2s;
    display:block;
    background:red
}
#toggle_visibility_box:checked + #content {
    height:auto;
    font-size:20px;
    line-height:20px
}

Hier das Ganze nochmal auf JSFIDDLE

Danke schonmal für eure Antworten

 

[Tronjer]

Naja, du kannst gerne nach "CSS3 Click-Event" googeln und schauen, ob du damit eine Lösung hinbekommst. Aber prinzipiell ist das natürlich eine JavaScript-Aufgabe.

 

[scbawik]

Vielleicht kommst du damit weiter:
:checked | CSS-Tricks

Den Sinn dahinter verstehe ich trotzdem nicht.

 

[BMicraft]

Falls es euch schon mal aufgefallen ist, ich habe das mit dem clickevent/:checked im Code!
Ich finde nur den Fehler nicht :/

 

[Banana_Jones]

Du schreibst #toggle_visibility_box:checked + #content, das entspricht aber nicht deinem HTML-Markup. "+" meint das direkt folgende Schwesterelement, im Markup hast du aber noch ein <label> dazwischen.

 

[djheke]

Hallo,

entweder so

#toggle_visibility_box:checked + label + #content {
    height:auto;
    font-size:20px;
    line-height:20px
}

Oder so

#toggle_visibility_box:checked ~ #content {
    height:auto;
    font-size:20px;
    line-height:20px
}

 

[BMicraft]

Danke, für deinen zweiten Code-Ausschnitt;
Der erste hat zwar irgendwie nicht funktioniert, aber mir ist der zweite eh lieber.
Danke, nochmal sieht jetzt so aus: JsFIDDLE