title: Reveal and hide a div on checkbox condition with css
body: <p>What I'm trying to do is reveal and hide a div when the label + checkbox is checked. (CSS only)</p>
  
  <p>So if [Sign Up] is clicked (checked). Hide itself(div.remove-check) and reveal the hidden input (div#email). I thought the code I had would be good enough, but it isn't. What am I doing wrong?</p>
  
  <p>My code: </p>
  
  <p>Html:</p>
  
  <pre><code>&lt;div class="remove-check"&gt;
      &lt;label for="reveal-email" class="btn" style="width: 300px"&gt;&lt;input type="checkbox" id="reveal-email" role="button" /&gt;Sign Up&lt;/label&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div id="email"&gt;
      &lt;form id="email-form" class="nice" action="" method="post"&gt;
          &lt;input class="input-text required email" type="text" name="EMAIL" id="id_email" placeholder="Email" /&gt;
          &lt;input type="hidden" name="name" id="id_name_email"&gt;
          &lt;a class="btn" &gt;Apply&lt;/a&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>input[type=checkbox]{
      visibility: hidden;
  }
  input[type=checkbox]:checked ~ .remove-check{
      display: none;
  }
  input[type=checkbox]:checked ~ #email{
      display: block;
  }
  #email{
      display: none;
  }
  </code></pre>
  
  <p>Here's a <strong><a href="http://jsfiddle.net/Kqscu/3/">fiddle</a></strong> to show you what I'm working with. </p>
  
  <p>Thank you for your help in advance.</p>