title: How do I make an expandable box with CSS and javascript?
body: <p>EDIT: I should have specified that I want it to be animated, and retractable. So why isn't the + sign moving with the rest of the box? And why isn't it animated? I have the transition CSS.</p>
  
  <p>I know this has been asked before, but I tried writing my own, and it's just... not working. Check the jsfiddle to see what I mean.</p>
  
  <p>I'm not trying to use too much Javascript. All I use it for is to toggle the state of the menu. Everything animation needs to be CSS. Now, the only thing confusing me is <em>why</em> this doesn't work? </p>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/bjhph51u/1/" rel="nofollow">http://jsfiddle.net/bjhph51u/1/</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="expandbox" expanded="false"&gt;
  &lt;input name="username" type="text" placeholder="Username" disabled&gt;&lt;/input&gt;
  &lt;input name="password" type="password" placeholder="Password" disabled&gt;&lt;/input&gt;
  &lt;button type="submit" disabled&gt;go&lt;/button&gt;
  &lt;/div&gt;
  &lt;a href="#" id="plus" onclick="expandBox()"&gt;
  +
  &lt;/a&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>//expand top box
  var box = document.getElementById("expandbox");
  function expandBox(){
      if(box.getAttribute("expanded")=="false"){
          box.setAttribute("expanded","true");
          box.style.height="100px";
          box.style.display="block";
      }else{
          box.setAttribute("expanded","false");
          box.style.height="0px";
          box.style.display="none";
      }
  }
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#expandbox {
      display:none;
      position:fixed;
      height:0px;
      -webkit-transition:height 0.5s;
      transition:height 0.5s;
      -o-transition:height 0.5s;
      -moz-transition:height 0.5s;
  }
  </code></pre>
  
  <p>Please help me, thanks in advance!</p>