<!DOCTYPE html>
<html lang="en-us">
<head>
	<meta charset="utf-8">
	<title>Hidden info panel</title>

  <style>
    html {
      font-family: sans-serif;
    }

    /* || Checkbox hack to control information box display */

    label[for="toggle"] {
      font-size: 3rem;
      position: absolute;
      top: 4px;
      right: 5px;
      z-index: 1;
      cursor: pointer;
    }

    input[type="checkbox"] {
       position: absolute;
       top: -100px;
    }

    /* information box styling */

    aside {
      background-color: #a60000;
      background: linear-gradient(to top left, #ff0000, #a60000);
      color: white;
      font-size: 1.4em;
      text-shadow: 2px 2px 2px black;

      width: 340px;
      height: 98%;
      padding: 10px 1%;

      position: fixed;
      top: 0;
      right: -370px;

      transition: 0.6s all;
    }

    /* Second part of the checkbox hack — the checked state */

    input[type=checkbox]:checked + aside {
      right: 0px;
    }
  </style>

</head>
<body>


  <label for="toggle">❔</label>
  <input type="checkbox" id="toggle">
  <aside>
    <h2>Information</h2>

    <p>Some very important information about your app:</p>

    <ol>
      <li>It has a really cool slide-out information box.</li>
      <li>This information box uses a combination of fixed positioning and a CSS transition for the smooth sliding.</li>
      <li>It also uses a cool technique called the <a href="https://css-tricks.com/the-checkbox-hack/">checkbox hack</a>.</li>
      <li>This allows you to create a nice "toggle on/toggle off" UI effect without using any JavaScript, which will work in IE9 and above (the smooth transition will work in IE10 and above.)</li>

    </ol>

  </aside>
</body>
</html>
