title: Move and resize panel to simulate growing effect
body: <p>I have hard time understanding and creating a proper function using jQuery.</p>
  
  <p>I have 2 main areas in my site. The first is the content area that appears over the other area I named panel.</p>
  
  <p>All I want is this panel when I click on a specific link to move a bit upper and to resize to the size of the movement. It should represent a panel growing from the bottom up which is currently not working!?</p>
  
  <p>Here is my jQuery code:</p>
  
  <pre><code>&lt;script&gt;
  $("#moveUp").click(
   function(){
       $("#panel").animate(
     { 
            marginTop: "-=50px",
      }, 1000 ); 
     }
    );
   };
  
   function() {
    $("#panel").animate(
     { 
            height: "+=50px",
      }, 1000 ); 
     }
    );
   } 
  );
  &lt;/script&gt;
  </code></pre>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;body&gt;
  
  &lt;div id="content-container"&gt;
  
  &lt;div id="content"&gt;
  some content
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;div id="panel"&gt;
  
  &lt;div class="content"&gt;
  other content
  &lt;br /&gt;&lt;br /&gt;
  &lt;a href="#" id="moveUp"&gt;move a bit up&lt;/a&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>What's my goal is when I click on the 'move a bit up' link, the panel to move 50px upwards. Later I want to show my email address here and will have a function that will show a div element with my email or if I press on other link - it will hide my email address - the panel will move downward.</p>