title: Expand and Animate Div Vertically and Horizontally
body: <p>I'm trying to make it so that the divs within my carousel slider will toggle and expand into a larger div that will fit within the carousel on-click and reset with new div contents. All the expanding divs I've looked at have only slid down, and the old div information remains.</p>
  
  <p>This is the only JavaScript I've found, but I do not know how to apply it with new div information upon expanding.</p>
  
  <pre><code>$("#expand").click(function(){
      $(".article-container").animate({
          width: "100px",
          height: "100px",
          top: "-50px",
          left: "-50px",
          opacity: 0.6,
      }, 1500 );
  });
  </code></pre>
  
  <p>Here is the CSS for the container before expanding and after.</p>
  
  <pre><code>.article-container{
      float: left;
      width: 193px;
      height: 360px;
      margin: 0 13px 0 0;
  }
  
  .article-container-expand{
      float: left;
      width: 500px;
      height: 1000px;
      margin: 0 13px 0 0;
  }
  </code></pre>