CSS3 Expander

HTML

<div class="associated-items cf">
    <input type="checkbox" class="associated-items-checkbox" id="associated-items-checkbox"/>
    <label class="associated-items-header" for="associated-items-checkbox">
        <div class="associated-items-header-text items"></div>
    </label>
    <div class="associated-items-list">
            <div class="associated-item">Item 1</div>
            <div class="associated-item">Item 2</div>
            <div class="associated-item">Item 3</div>
            <div class="associated-item">Item 4</div>
            <div class="associated-item">Item 5</div>
            <div class="associated-item">Item 6</div>
    </div>
</div>

CSS

/* Associated items */
.associated-items {
    background-color: #CCCCCC;
    width: 90%;
    border-radius: 2px;
    border: 1px solid #AAAAAA;
}
.associated-items-checkbox {
    display: none;
}
.associated-items-header {
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select: none;
    user-select: none;
}
.associated-items-header-text {
    padding: 10px;
}
.associated-items-checkbox:not(:checked) ~ .associated-items-header .items:before {
    content: "Show";
}
.associated-items-checkbox:checked ~ .associated-items-header .items:before {
    content: "Hide";
}
.associated-items-list {
    background-color: white;
    display: block;
    overflow: hidden;
    position: relative;
}
.associated-item {
    height: 0px;
    margin-bottom: 0px;
    transition: padding 0.2s, height 0.2s;
    padding-left: 10px;
    -moz-transition: padding 0.2s, height 0.2s; /* Firefox 4 */
    -webkit-transition: padding 0.2s, height 0.2s; /* Safari and Chrome */
    -o-transition: padding 0.2s, height 0.2s; /* Opera */
}
.associated-items-checkbox:checked ~ .associated-items-list .associated-item {
    border-bottom: solid 1px #bfbfbf;
    height: auto;
    padding: 5px 10px;
}
.associated-items-checkbox:checked ~ .associated-items-list .associated-item:last-child {
    border-bottom: none;
}