How to collapse div same like facebook chat

Question

I try to do something similar like facebook chat but this for personal use. Everything work fine except some css part. I try with position absolute to arrage the div, yes can do but problem when i loop chat box in php.. and i need to use float (float div box to right). you can check my jsfiddle here Below is some code snippet in jquery ``` //Close $('.closed1').click(function () { $('.wrap_box1').hide(); $('.main_chat1').addClass('hide_wrap_box'); }); //Open $('.open_chat1').click(function () { $('.wrap_box1').show(); $('.main_chat1').removeClass('hide_wrap_box'); }); ``` If you see my jsfiddle the chat box is collapse to top but how to collapse to bottom ? , try click close button.

Accepted Answer

The way I would approach this is something like this:

Steps:

- make an chat area that surrounds the chat-boxes

- chat-boxes to display as inline-blocks

- position the user boxes to bottom:0

On your example:

I would use `display:inline-block` on the `chat_box` class ... this way the parent will respond to the size of the box.

And float right the parent of the `chat_box`

```
#chat_area {
    float:right;
}
```

but the `user_box` itself would just be aligned to the bottom of the `chat_box`.

```
.user_box {
    ...
    bottom:0;
}
```

This way the whole chat area will float to the right ... and resize shrink to the bottom when all chat boxes are closed.

Here is a fiddle for illustration: http://jsfiddle.net/mazzt/7/

How to collapse div same like facebook chat

Solution

Problem