How can I use easing effects to this div that expands onclick, as well as fade in effects on the elements inside it?

Question

I have two problems,

1) I have a div that expands onclick, (.panel) how can I use easing on it so it opens in a smooth way?

2) how can I make the ul list within the expanding div (.panel) fade in a few mili seconds after the div has expanded?

<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
    <ul>
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>

JS

 var next_move = "expand";
$(document).ready(function () {
 $(".panel").click(function () {
     console.log(next_move);
     var css = {};
     if (next_move == "expand") {
         css = {
             width: '210px',
             height: '170px'
         };
         next_move = "shrink";
     } else {
         css = {
             width: '30px',
             height: '20px'
         };
         console.log('hi');
         next_move = "expand";
     }
     $(this).animate(css, 200);
 });
});




     .panel {
      width: 30px;
      height: 21px;
      overflow: hidden;
      color:white;
      background-color: grey;
  }
      .panel ul {
       margin-left:10%;
       color:white;
 }
      .mores {
      width: 210px;
      height: 170px;
      overflow: hidden;
 }

here is the fiddle JSFiddle

Many Thanks

Answer 1

I tried something, tell me if that's what you expected. http://jsfiddle.net/z2p0r5s9/11/

<div id="effect" class="mores" style="background-color: brown">
<div class="panel">click
    <ul style="display:none">
        <li>Coffee</li>
        <li>Tea</li>
        <li>Milk</li>
    </ul>
</div>

CSS

.panel {
  width: 30px;
  height: 21px;
  overflow: hidden;
  color:white;
  background-color: grey;
  transition: all 2s ease;
}

JS

 var next_move = "expand";
 $(document).ready(function () {
 $(".panel").click(function () {
     console.log(next_move);
     var css = {};
     if (next_move == "expand") {
         css = {
             width: '210px',
             height: '170px'
         };
         next_move = "shrink";
          setTimeout(function(){
             $('ul').fadeIn();                 
         },2000);
     } else {
         css = {
             width: '30px',
             height: '20px'
         };
         console.log('hi');
         next_move = "expand";

     }
     $(this).animate(css, 200);
 });
});