title: Enlarge/Shrink element on click in JQuery
body: <p>I'm trying to create an unordered list where each li is a little "tile" that expands and collapses (using animate() )  with a click. I've got it to where the li will enlarge, but I can't figure out how to shrink it back down again.</p>
  
  <p>Here's the code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="jquery.animate-colors-min.js"&gt;&lt;/script&gt;
  
  
  &lt;style type="text/css"&gt;
   ul#tiles {
  margin:0;
  padding:0;
  list-style-type:none;
  width:300px;
  }
  ul#tiles li {
  float:left;
  width:72px;
  height:72px;
  border:1px solid black;
  background:#09F;
  margin:10px;
  overflow:hidden;
   }
  ul#tiles li a { 
  }
  
  &lt;/style&gt;
  
  
  
  
  &lt;script&gt;
  $(document).ready(function() {
      $("li.closed a").click(function(){
          $(this).parent()
              .animate({height:"300px"},{duration: 400, queue: false })
              .animate({width:"300px"},{duration: 400, queue: false })
              .animate({backgroundColor:"#fff"},{duration: 400, queue: false })
              .attr("class","open")
          ;
          $(this).text("Close");
      }); // closes click on "li.closed a"
      $("li.open a").click(function(){
          $(this).parent()
              .animate({height:"72px"},{duration: 400, queue: false })
              .animate({width:"72px"},{duration: 400, queue: false })
              .animate({backgroundColor:"#09f"},{duration: 400, queue: false })
              .attr("class","closed")
          ;           
          $(this).text("Open");
      }); // closes click on "li.closed a"
  }); // closes document ready function
  &lt;/script&gt;
  
  
  
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;ul id="tiles"&gt;
  &lt;li class="closed"&gt;&lt;a href="#"&gt;Open&lt;/a&gt;&lt;br /&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
  &lt;li class="closed"&gt;&lt;a href="#"&gt;Open&lt;/a&gt;&lt;br /&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
  &lt;li class="closed"&gt;&lt;a href="#"&gt;Open&lt;/a&gt;&lt;br /&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
  &lt;li class="closed"&gt;&lt;a href="#"&gt;Open&lt;/a&gt;&lt;br /&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
  &lt;li class="closed"&gt;&lt;a href="#"&gt;Open&lt;/a&gt;&lt;br /&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
  &lt;li class="closed"&gt;&lt;a href="#"&gt;Open&lt;/a&gt;&lt;br /&gt;Lorem ipsum dolor sit amet&lt;/li&gt;
  &lt;/ul&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>