How to collapse a div just like in facebook chat

Question

I am trying to do something similar as in facebook chat, but this is for personal use. Everything works fine except for the css part.

I am trying with an absolute position to create a div, yes it can handle it, but the problem is when I have a chat loop in php .. and I need to use float (float div box on the right).

you can check my jsfiddle here

Below is a snippet of code 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 window crashes to the top, but how to minimize to the bottom ?, try clicking the close button.

Answer 1

The way I approach this looks something like this:

Steps:

• create a chat zone that surrounds chat boxes
• chat boxes to display as embedded units
• position user boxes below: 0

In your example:

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

And float to the right the chat_box

 #chat_area { float:right; } 

but user_box itself will just be aligned with the bottom of chat_box .

 .user_box { ... bottom:0; } 

Thus, the entire chat area will float to the right ... and the resize will decrease to the bottom when all chat windows are closed.

Here is a script to illustrate: http://jsfiddle.net/mazzt/7/

Answer 2

I tried to do this starting with 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/

Answer 3

Try slideToggle(); and / or toggleClass();