animation not working in jquery

$(document).ready(function () {
    $('.btn').toggle(function () {
      $(".mydiv").animate({ height:"100%" });
    },
    function () {
        $(".mydiv").animate({ height: 50 });
    });
});

 <div class="btn">
        Header 1</div>
    <div class="mydiv">
This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
        This is the content for the first header.<br />
    </div>
  </div>