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.

Answer 1

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/

Answer 2

i've tried to do it starting from your example!

 $(document).ready(function () {
        $('.main_chat2').toggle("bounce",{ times: 3 }, "slow");
    $('.user_box').click(function () {
        if ($('.wrap_box2').is(":visible")) {
            $('.wrap_box2').hide();
            $('.main_chat2').addClass('hide_wrap_box');
            $('#icon').html('^');
        }
        else {
            $('.wrap_box2').show();
            $('.main_chat2').removeClass('hide_wrap_box');
            $('#icon').html('x');
        }
    });
   });

you can see it at this link: http://jsfiddle.net/ernestoarbitrio/DyfBW/31/