Expand Div

Facebook chat like expand collapse

by dhavaljani

HTML

<link rel="stylesheet" href="http://twitter.github.io/bootstrap/assets/css/bootstrap.css">
<div class="index_reload">
    <!--index_reload-->
    <div id="chat_area">
    <!--chat_box-->
    <div class="chat_box main_chat2 hide_wrap_box" id="chat_id">
        <!--chat_box-->
        <div class="user_box">
            <div class="name open_chat2 left">mozilla</div>
            <div class="closed2 right" id="icon">Read More</div>
            <div class="clear"></div>
        </div>
        <div class="wrap_box2" style="display:none">
            <!--wrap_box-->
            <div class="message_content">
                <form class="form-horizontal">
                  <div class="control-group">
                    <div class="controls">
                      <input type="text" id="inputEmail" placeholder="Email">
                    </div>
                  </div>
                  <div class="control-group">
                    <div class="controls">
                      <input type="password" id="inputPassword" placeholder="Password">
                    </div>
                  </div>
                  <div class="control-group">
                    <div class="controls">
                      <label class="checkbox">
                        <input type="checkbox"> Remember me
                      </label>
                      <button type="submit" class="btn">Sign in</button>
                    </div>
                  </div>
                </form>
            </div>
            <!--wrap_box-->
        </div>
        <!--chat_box-->
    </div>
</div>
<!--index_reload-->

CSS

body {
    margin:0px;
    padding:0px;
}
* {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
}
.chat_box {
    display:inline-block;
    width:380px;
    margin-left: 5px;
}
.main_chat2{
    display:none;
}
.user_box {
    display:block;
    bottom:0;
    background: #5ba0d0 none repeat scroll 0 0;
    color: #FFF;
    padding: 10px;
    cursor: pointer;
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.user_box:hover {
    cursor:pointer;
}
.left {
    float:left;
}
.right {
    float:right;
}
.clear {
    clear:both;
}
.message_post {
    border-top:1px solid #EFEFEF;
    display:block;
    padding:5px 3px;
}
.message_text {
    margin-left:5px;
}
.message_content {
    border:1px solid #ddd;
    height:285px;
    /*overflow-y:scroll;*/
    text-align:left;
}
.box_reply {
    border:1px solid #ddd;
}
.text_reply {
    display:block;
    width:99%;
}
.user_img {
}
.hide_wrap_box {
    height:22px;
    bottom:0;
}
.name {
    display: block;
    width: 80%;
    font-weight:bold;
    font-family: arial;
}
.index_reload {
    border: 0px solid #ddd;
    position: absolute;
    bottom: 1px;
    right: 1px;
    width: 100%;
}
#chat_area {
    float:right;
}

JavaScript

$(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('Read More');
        }
        else {
            $('.wrap_box2').show();
            $('.main_chat2').removeClass('hide_wrap_box');
            $('#icon').html('x');
        }
    });
});