Animate company staff list with description

The task was to make a list of all employees in two column like office staff and technical advisors lists with additional function as expand space of staff description by clicking on the employee name.

by Serge

HTML

<div class="staff">
  <div class="staff-block">
	<div  class="staff-title">Staff</div>
	<div class="staff-section">
		<div class="staff-name">Maria Beavis</div>
		<div class="staff-desc">
		  <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Maria earned a Bachelor of Commerce degree from McGill University in 2006 with concentrations in Finance and International Business. She has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007.</p>
		</div>
		<div class="staff-name">Diana Smitt</div>
		<div class="staff-desc">
		  <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Diana joined the Diana Smitt Group to help contribute to its ongoing commitment to provide superior investement advice and exceptional service. She has a Bachelor of Commerce degree from the John Molson School of Business with a major in Finance and has been continuing her education by completing courses.</p>
		</div>
		<div class="staff-name">Mike Ford</div>
		<div class="staff-desc">
		  <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Mike: A graduate of École des hautes études commerciales (HEC Montreal), Guillaume holds the Chartered Investment Management designation (CIM). After having been active in the financial services industry for 4 years at a leading competitor he joined the Mike Ford Group.</p>
		</div>
	</div>
  </div>

  <div class="staff-block">
	<div  class="staff-title">Technical Advisors</div>
	<div class="staff-section">
		<div class="staff-name">TA Elvira Bett</div>
		<div class="staff-desc">
		  <p><img src="http://www.craigmarlatt.com/canada/images/security&defence/coulombe.jpg" />Elvira has completed her wealth Management Essentials course with the Canadian Securities Institute and has worked in the industry since 2007. Laura works directly with Caroline Hild, aiding in revising client...

CSS

.staff {            margin:10px 0;}
.staff-block{       float: left; width:48%; padding-left: 10px; padding-bottom: 10px;}
.staff-title{       font-family: Verdana, Tahoma, Arial, Serif; background-color: #1162c5; color: white;
                    padding:4px; border: solid 1px #2e3d7a; border-top-left-radius:3px; 
                    border-top-right-radius: 6px; font-weight: bold;}
.staff-name {       font-family: Myriad Web Pro; font-size: 11pt; line-height:30px; padding: 0 10px;}
.staff-name:hover { background-color: silver !important; cursor: pointer;}
.staff-section {    display:inline-block; padding-left: 10px;}
.staff-desc {       font-family: Myriad Web Pro; height: 0px; padding: 3px; overflow:hidden; background-color:#def; 
                    display: block; border: solid 1px silver;}
.staff-desc p {     text-align: justify; margin-top: 5px;}
.staff-desc img {   margin: 5px 10px 5px 5px; float:left; height: 185px; }

JavaScript

$('.staff-name').hover(function() {
    $(this).toggleClass('hover');
});

var lastItem;

$('.staff-name').click(function(currentItem) {
    var currentItem = $(this);
    if ($(this).next().height() == 0) {
        $(lastItem).css({'font-weight':'normal'});
        $(lastItem).next().animate({height: '0px'},400,'swing');
        $(this).css({'font-weight':'bold'});
        $(this).next().animate({height: '250px',opacity: 1},400,'swing');
    } else {
        $(this).css({'font-weight':'normal'});
        $(this).next().animate({height: '0px',opacity: 1},400,'swing');
    }
    lastItem = $(this);
});