Afficher et masquer un div sur la case à cocher état avec css

Ce que je suis en train de faire est de montrer et de cacher une div lorsque l'étiquette + case est cochée. (CSS)

Donc, si [s'inscrire] est activé (coché). Se cacher(div.retirez-check) et de révéler le caché d'entrée (div#e-mail). Je pensais que le code que j'avais assez bien, mais il ne l'est pas. Ce que je fais mal?

Mon 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;
}

Voici un violon pour vous montrer ce que je suis en train de travailler avec.

Je vous remercie pour votre aide à l'avance.

OriginalL'auteur Modelesq | 2013-09-11