CoolList

by mmarcon

HTML

<section id="list">
    <ul>
        <li class="active">
            <h5>Lorem ipsum dolor sit amet</h5>
            <p><img src="http://dl.dropbox.com/u/234787/ifiddle/mario.png"/>Vivamus at risus eu massa ultrices suscipit. Morbi volutpat risus eget orci adipiscing in laoreet nisi sagittis. Donec est arcu, facilisis id mollis at, mollis at tortor. Aliquam fringilla scelerisque mauris. In mollis tortor pulvinar ipsum fermentum accumsan.</p>
        </li>
        <li class="active">
            <h5>Nulla dapibus tortor id diam adipiscing</h5>
            <p><img src="http://dl.dropbox.com/u/234787/ifiddle/monkey.png" />Proin nec magna et nibh cursus scelerisque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam in erat neque, vel rhoncus magna.</p>
        </li>
        <li class="active">
            <h5>Phasellus imperdiet viverra massa</h5>
            <p><img src="http://dl.dropbox.com/u/234787/ifiddle/ubuntu.png" />Morbi vel urna sit amet orci faucibus tempus et vitae risus. Etiam sodales justo vitae nulla adipiscing viverra. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla semper scelerisque ultrices.</p>
        </li>
    </ul>
</section>

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:100);
@import url(http://fonts.googleapis.com/css?family=Oswald);

body {
    background-color: #222;
    font-family: 'Raleway', arial, serif;
    color: #fff;
}

section#list {
    width: 80%;
    margin: 10px auto;
}

#list li {
    margin: 15px 0;
    height: 36px;
    overflow: hidden;
    border: 1px solid #666;
    border-radius: 2px;
    box-shadow: 0 2px 5px #000;
}

#list li.active {
    height: auto;
}

#list h5 {
    font-family: 'Oswald', arial, serif;
    font-size: 16px;
    margin-bottom: 8px;
    padding: 8px;
    text-shadow: -1px -1px 0 #000;
}

#list h5.link {
    cursor: pointer;
}

#list h5.link:hover {
    background-color: #333;
}

#list p {
    padding: 8px;
    overflow: hidden;
}

#list p img {
    float: left;
    margin: 0 10px 0 0;
    display: inline-block;
    padding: 2px;
    border-radius: 2px;
}

JavaScript

$(function() {
   $('#list li').removeClass('active')
                .children('h5').addClass('link')
       .click (function() {
           $(this).parent().toggleClass('active');
       });
});