Sidebar widgets

by sambaldwin

HTML

<h4>First widget</h4>
<ul>
    <li>Sed posuere consectetur est at lobortis.</li>
    <li>Consectetur est at lobortis.</li>
    <li>Donec sed odio dui.</li>
</ul>

<h4>Second widget</h4>
<ul>
    <li>Sed posuere consectetur est at lobortis.</li>
    <li>Consectetur est at lobortis.</li>
    <li>Donec sed odio dui.</li>
</ul>

<h4>Third widget</h4>
<ul>
    <li>Sed posuere consectetur est at lobortis.</li>
    <li>Consectetur est at lobortis.</li>
    <li>Donec sed odio dui.</li>
</ul>

CSS

* {
    margin:0;
    padding:0;
}
body {
    font-family:Helvetica Neue;
    font-size:100%;
    line-height:1.4em;
    font-weight:300;
    padding:20px;
    background:#ddd;
}
h4 {
    font-size:100%;
    line-height:1.4em;
    font-weight:500;
    cursor:pointer;
    margin:0 0 0.35em 0;
}

h4:hover {
    color:red;
}

ul {
    margin:0 0 1.4em 0;
    display:none;
}
li {
    list-style-type:none;
}

JavaScript

$(document).ready(function () {
    $('h4').click(function () {
        $(this).next('ul').slideToggle(0);
    });
});