title: Expand/Collapse content with css in html mail
body: <p>I'm building html mail, in which I have a checkbox:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#table1 {display: block}
  input:checked ~ #table1 {display: none}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;input id="checkbox" class="toggle" type="checkbox"&gt;
  &lt;table id="table1" style="width: 100%; border: 0; padding: 0; text-align: center; position: fixed; bottom: 0" cellpadding="9" cellspacing="0"&gt; 
    &lt;td style="font-size: 9px; font-family: Verdana; color:#898a8c"&gt;hide me&lt;/td&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>If I open it in my web browser, it works fine, but, if I send it as a html email (I'm working with outlook), nothing happens on checkbox checked. I know there is no way to use JavaScript in mail (it would be a security issue), but, can I make it works using only CSS?</p>