Zeigen und verstecken von div-auf checkbox-Zustand mit css

Was ich versuche zu tun, ist zeigen und ausblenden, div bei der label - + - checkbox aktiviert ist. (Nur CSS)

Also, wenn [Anmelden] geklickt wird (aktiviert). Verstecken sich(div.entfernen-check) und der verborgene Eingang (div#E-Mail). Ich dachte, der code, den ich hatte würde gut genug sein, ist es aber nicht. Was mache ich falsch?

Mein code:

Html:

<div class="remove-check">
    <label for="reveal-email" class="btn" style="width: 300px"><input type="checkbox" id="reveal-email" role="button" />Sign Up</label>
</div>
<br>
<div id="email">
    <form id="email-form" class="nice" action="" method="post">
        <input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" />
        <input type="hidden" name="name" id="id_name_email">
        <a class="btn" >Apply</a>
    </form>
</div>

CSS:

input[type=checkbox]{
    visibility: hidden;
}
input[type=checkbox]:checked ~ .remove-check{
    display: none;
}
input[type=checkbox]:checked ~ #email{
    display: block;
}
#email{
    display: none;
}

Hier ein fiddle Ihnen zu zeigen, was ich arbeite.

Danke für Eure Hilfe im Voraus.

InformationsquelleAutor Modelesq | 2013-09-11
Schreibe einen Kommentar