Edit in JSFiddle

<div class="info">
      <p class="lead">ぽぽぽぽぽぽぽぽぽぽぽぽぽぽ。。。</p>
  <div class="close"><a href="">閉じる</a></div>
    
</div>
<div class="button">
    <input type="button" value="クリック" id="click">
</div>

.info{
 position: relative; 
 width: 300px;
 margin: 10px auto;
 display: block;
 height: 60px;
 /* 四角画像を楕円に */
 border-radius: 40px 40px 40px 40px / 30px 30px 30px 30px;
 background: #FFF;
 -webkit-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
 -moz-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
 -ms-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
 -o-box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
 box-shadow: 2px 3px 7px rgba(88,75,69,0.8) inset;
 /* 高さをアニメーション */
 -webkit-transition: 1s ease;
 -moz-transition: 1s ease;
 -ms-transition: 1s ease;
 -o-transition: 1s ease;
 transition: 1s ease;
}

  .info .lead {
   padding-right: 25px;
   padding-left: 25px;
   opacity: 0;
   height:0;
   filter: alpha(opacity=0);
   -webkit-transition: 0.3s ease;
   -moz-transition: 0.3s ease;
   -ms-transition: 0.3s ease;
   -o-transition: 0.3s ease;
   transition: 0.3s ease;
  }
 /* 閉じるボタン */
 .info .close {
  position: absolute;
  top: 50%;
  right: 1px;
  background:#000;
  width: 24px;
  height: 0px;
  cursor: pointer;
  text-indent: -9999px;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}
 .button{
    width:300px;
    margin:0 auto;
}
 
 
   /* クリック時 */
.info.active {
 height: 100px;
 padding-top: 25px;
 padding-bottom: 25px;
 background-color: #FFF;
 border-radius: 10px;
 /* 高さをアニメーション */
 -webkit-transition: 1s ease;
 -moz-transition: 1s ease;
 -ms-transition: 1s ease;
 -o-transition: 1s ease;
 transition: 1s ease;

}

 .info.active .lead {
  opacity: 1;
  filter: alpha(opacity=1);
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
 -moz-transition-delay: 1s;
 -webkit-transition-delay: 1s;
 -o-transition-delay: 1s;
 -ms-transition-delay: 1s;
 }

.info.active .close {
 height: 23px;
  -webkit-transition: 0.3s ease;
  -moz-transition: 0.3s ease;
  -ms-transition: 0.3s ease;
  -o-transition: 0.3s ease;
  transition: 0.3s ease;
}

$(document).ready(function() {
    //    クリックしたらactive
    $('#click').live('click', function() {
        $('.info').toggleClass('active');
    });
    //    closeボタンをクリックしたら消す
    $('.close').live('click', function() {
        $('.info').removeClass('active');
    });
});