title: Making an Information Box Fly Out and Expand
body: <p>I am trying to make a circle that, when clicked, causes a box with text to fly out and expand. Then, when clicked again, I want the box to collapse and become invisible again. I've included my code. I got the box to fly out, but I cannot seem to get it to collapse. Please help.</p>
  
  <p>HTML/Javascript</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html&gt;
  
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="indexstyle.css"&gt;
  &lt;title&gt;
  &lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id ="container"&gt;
  &lt;div id ="circle" onclick = "expand();"&gt;
  &lt;div id ="info"&gt;
  Information will go here
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  var expanded = 0;
  function expand(){
  if (expanded == 0){
  var info = document.getElementById("info");
  var circle = document.getElementById("circle");
  info.style.zIndex = 1;
  info.style.margin = "300px";
  info.style.width = "500px";
  info.style.padding = "50px";
  info.style.visibility = "visible";
  info.style.height = auto;
  info.style.zIndex = "-1";
  expanded = 1;
  return expanded;
  }
  else {
  info.style.margin = "0";
  }
  }
  &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#container {
  position: relative;
  width: 100%;
  padding-bottom: 100%;
  }
  
  #circle {
  position: absolute;
  width: 10%;
  height: 10%;
  background-color: blue;
  border-radius: 50%;
  }
  
  #info{
  word-wrap: break-word;
  margin-top: 25%;
  margin-left: 25%;
  position: absolute;
  width: 15%;
  height: 15%;
  background-color: #e5e5e5;
  border-radius: 25px;
  transition: 0.5s;
  z-index: -1;
  visibility: hidden;
  overflow: hidden;
  border: solid black 1px;
  }
  </code></pre>