Instant messenger in Jquery, how to append complete divs to #container div

Question

Im trying to build an instant messenger in facebook styled bar that sits at the bottom of the screen, after many tries I have a basic setup but Im stuck on how to approach this. I hope my question is concrete enough like this. Think of the Facebook IM thats what I try to replicate in simple form.

I have 2 relevant issues with my code, 1 question:

1. If you click the green friends div it expands downwards, how to make it expand upwards?

2. What would be a good way to attach extra divs to the #container when you click any of your friends?

   Question:. Can I use components like jquery UI perhaps or is there some good example somewhere to take and learn from? Im relativly jquery newbie and have tried for several hours to find how to do this :(

The html:

<div id="container">
  <div id="friends">
    Friends: (2) Online
      <ul>
          <li id="person">Doutzen</li>
          <li id="person">Alexandra</li>
      </ul>
  </div>
    container, new chat boxes appear here
</div>

The css:

body {
    padding-top: 400px;
}

#container {
    background-color: grey;
    width: 100%;
    height: 30px;
}

#friends {
    position: relative;
    height: 10px;
    color: white;
    width: 150px;
    background-color: green;
    padding: 10px;
    float: right;
    overflow: hidden;
}

#friends ul li {
    padding: 10px;
    margin: 10px;
    background-color: darkgreen;
}
​

The Jquery:

$('#friends').toggle(function(){
    $(this).animate({'height': '100px'}, 10);
}, function(){
    $(this).animate({'height': '10px'}, 10);
});

$(".person").click(function () {
      $('#container').append("<div class='chat'>chat with ...</div>");
});

Working example: http://jsfiddle.net/qJCmF/5/

Answer 1

1) For expanding upwards and downwards, take a look at the Slide jQuery UI effect. You can use it in conjunction with $('#my-element').show('slide'); and $('#my-element').hide('slide'); as shown. Also, there are a bunch of other effects you can use in the same way that may be more of what you're looking for; you can even provide additional parameters to control the way that the effect renders.

2) For attaching additional DOM elements to your container, you can keep calling append() or prepend() jQuery functions and they will keep adding your elements to the end or beginning of your container's child elements.