Floated User List with jQuery

Here I giving a tutorial for floated list of users expand and collapse with animation using jQuery. Here I display list expanded by default. See the html code below.

Image may be NSFW.
Clik here to view.

HTML

<div class="lggedUsr expanded">
  <div class="shwHdeBx">
   <a href="#" class="trgrShwHde"><span></span></a><span>Collapse</span>
  </div>
 <div class="lggedUsrCntnr">
  <ul>
   <li>
    <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
    <span>Binoy. P.M</span>
   </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Jos Mathew</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Jose Tharayil</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Melvin Peter</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Sebastin. S</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Susha Pillai</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Parvathi S</span>
  </li>
  <li>
   <img class="usrAvthr" src="images/admin_icon_lst.png" width="32" height="32" alt="" />
   <span>Arun Varma</span>
  </li>
 </ul>
</div>
</div>

See the CSS code below

  body{
	background-image:url(../images/bg.jpg);
	background-size:cover;
	margin:0;
	font-family:'Helvetica Neue', Arial, Helvetica, sans-serif;
	}
.userData {
	background:;
	width:99%;
	border-collapse:collapse;
	border: 0px solid black;
	}
h4{
	font-size:19px;
	color:#222;
	margin-bottom:10px;
	padding: 4px 0;
	}

.userData thead{
	background:#f4f3f3;
	border:1px solid #cfcfcf;
	line-height:35px;
	text-align:left;
}
.userData thead th, .userData tbody td{
	padding-left:5px;
}
.userData tbody td{
	border-bottom:1px solid #cfcfcf;
	line-height:45px;
}
.count {
	background:rgb(45, 127, 192);
	color:#fff;
	border-radius:20px;
	display:inline-block;
	padding:4px;
	border:2px solid #fff;
	box-shadow:0 0 4px rgba(000,000,000,0.4);
	}
.blocks {
	float:left;
	width:45%;
	border-right:1px dotted #dadada;
	margin-right:20px;
	margin-bottom: 50px;
	padding-right:10px;
	}
.usrAccssBtns {
	float:right;
	padding-right: 6px;
	position:relative;
	}
.flt {float:left;}
.usrAccssBtns a {
	background:#f5f5f5;
	text-decoration:none;
	color:#333;
	border:1px solid #dedede;
	border-radius:20px;
	display:inline-block;
	padding:5px 10px;
	font-size:13px;
	margin-left:4px;
	box-shadow:0 1px 2px rgba(000,000,000,0.2);
	margin-top:5px;
	}
.usrAccssBtns a.active , .usrAccssBtns a:hover{
	border-color:#696969;
	box-shadow:none;
	font-weight:bold;
	color:rgb(45, 127, 192);
	}
 .usrAccssBtns a:hover{
	 font-weight:normal;
	 color:#333;
	 }
.usrAccssBtns a.active:hover {
	font-weight:bold;
	color:rgb(45, 127, 192);

	}
.dateRngBx {
	display:none;
	float:right;
	clear:both;
	border: 1px solid rgba(000,000,000,0.3);
	position:relative;
	right:10px;
	top:-10px;
	padding: 4px 20px 17px 20px;
	height:20px;
	width:470px;
	background:#f5f5f5;
	border-radius:3px;
	box-shadow:0 1px 8px rgba(000,000,000,0.3);
	}
.dateRngBx input[type=text]{
	border:1px solid #dedede;
	background: #fff;
	border-radius:15px;
	padding:5px 12px;
	font-size:15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size:15px;
	box-shadow:inset 0 1px 2px rgba(0,0,0,0.2);
	color:#333;
	width:80px;
	margin-left:5px;
	margin-right:5px;
	}
.dateRngBx input[type=submit], .dateRngBx input[type=button] {
	border: 1px solid #2c79a4;
	background: #489ccb;
	background: -moz-linear-gradient(top, #489ccb 0%, #3684b1 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#489ccb), color-stop(100%,#3684b1));
	background: -webkit-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: -o-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: -ms-linear-gradient(top, #489ccb 0%,#3684b1 100%);
	background: linear-gradient(to bottom, #489ccb 0%,#3684b1 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#489ccb', endColorstr='#3684b1',GradientType=0 );
	border-radius: 15px;
	font-family: Helvetica, Arial, sans-serif;
	font-size: 15px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.5);
	color: #fff;
	padding: 5px 16px;
}
.lggedUsr {
	background: #fff;
	position: fixed;
	right: 0;
	top: 48px;
	bottom: 0;
	width: 248px;
	z-index: 100;
	border-left: 1px solid #dadada;
	box-shadow: -2px 0 24px rgba(000,000,000,0.2);
	}
.usrAvthr {
	width:32px;
	height:32px;
	vertical-align:middle;
	margin-right:10px;
	border:2px solid #fff;
	box-shadow:0px 0px 5px rgba(000,000,000,0.5);
	}
.lggedUsrCntnr {
	padding:10px;
	height:100%;
	position:absolute;
	overflow:auto;
	}
.shwHdeBx {
	height:20px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	border-bottom:1px solid #dadada;
	}
.trgrShwHde {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	border-bottom:1px solid #dadada;
	display:inline-block;
	border-right:1px solid #dadada;
	width:20px;
	height:20px;
	vertical-align:middle;
	margin-right:7px;
	}
.trgrShwHde span{
	background:url(../images/arrow.png) no-repeat center center;
	display:block;
	height:20px;
	width:20px;
	}
.collapsed .trgrShwHde span{
	background: #b5db26;
	background: -moz-linear-gradient(top,  #b5db26 0%, #7ea119 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#b5db26), color-stop(100%,#7ea119));
	background: -webkit-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: -o-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: -ms-linear-gradient(top,  #b5db26 0%,#7ea119 100%);
	background: linear-gradient(to bottom,  #b5db26 0%,#7ea119 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b5db26', endColorstr='#7ea119',GradientType=0 );
	border-radius:10px ;
	height:10px;
	width:10px;
	margin-top:4px;
	margin-left:4px;
	border:1px solid #4e9a1b;

	}
.trgrShwHde + span {
	font-size:12px;
	color:#333;
	height:20px;
	width:20px;
	}
.lggedUsrCntnr li {
	border-bottom:1px solid rgba(000,000,000,0.1);
	padding:10px 0;
	width:242px;
	}
.lggedUsrCntnr li:hover {
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #efefef 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#efefef));
	background: -webkit-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -o-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: -ms-linear-gradient(top,  #ffffff 0%,#efefef 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#efefef 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#efefef',GradientType=0 );
	cursor:pointer;
	}

See the jQuery code below

  <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.min.js" ></script>
<script>
	$(document).ready(function(e) {
		var lggedWndwHeight = $('.lggedUsr.expanded').height();

		$('.expanded .trgrShwHde').live('click' ,function(){
				$('.lggedUsrCntnr').animate({
					opacity:'0',
					}, function(){
						$('.lggedUsr').animate({
						width:'20px',

						height:'20px'
						},
						function(){
						$('.trgrShwHde').next('span').css('display','none');
						$('.trgrShwHde').parent().parent().removeClass('expanded');
						$('.trgrShwHde').parent().parent().addClass('collapsed');
							}
						);
						}
					)
				})
		$('.collapsed .trgrShwHde').live('click' ,function(){
			$('.lggedUsr').animate({
					width:'248px',
						height:lggedWndwHeight
					}, function(){
						$('.lggedUsrCntnr').animate({
						opacity:'1'
						},
						function(){
						$('.trgrShwHde').next('span').css('display','inline-block');
						$('.trgrShwHde').parent().parent().removeClass('collapsed');
						$('.trgrShwHde').parent().parent().addClass('expanded');
							}
						);
						}

					)
			});
	});

</script>