Accordion

HTML

<!DOCTYPE html>
<html>
    <body>
        <h1>Click icon to expand/collapse</h1>
        <ul>
            <li class="active first"><div class="title">William</div><div class="icon"></div><div class="description">Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.</div></li>
            <li><div class="title">Charles Whitmore</div><div class="icon"></div><div class="description">Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.</div></li>
            <li><div class="title">Jack</div><div class="icon"></div><div class="description">Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.Lorem ipsum dolor sit amet. Conseuqieter lorem ipsum dolor.</div></li>
        </ul>
    </body>
</html>

CSS

body
{
    font-family:Helvetica, Arial; font-size:14px;   
}
h1
{
    margin:0 0 15px 0;
    font-size:20px; 
}
ul
{
    padding:15px 0 0 0;
}
li
{
    position:relative;
    border-top:1px solid #000;
    margin:34px 0 8px 0;
}
li.first
{
    margin-top:0;   
}
li .title
{
    display:inline-block; position:relative;
    top:-16px;
    margin:0 0 0 0; padding:0 5px 0 0;
    background:#FFF;
    font-weight:bold;
}
li .icon
{
    position:absolute;
    width:30px; height:30px;
    top:-15px; right:0;
    padding:0 5px;
    background:#FFF url(http://www.iconshock.com/css1/image_new/check.png) no-repeat 50% 50%;
}
li .description
{
    display:none;
    margin:-8px 0 0 0; padding:0 45px 0 0;
    color:#e5e5e5; font-size:12px;
}
li.active .description
{
     display:block;   
}

JavaScript

$('.icon').live('click', function(e)
{
    e.preventDefault();
    $(this).closest('ul').find('li.active').removeClass('active');
    $(this).closest('li').addClass('active');
});