CSS3 Checkbox Dropdown

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"><input type="checkbox" id="cb1"><label for="cb1">Item 1</label></div>
        <div class="associated-item"><input type="checkbox" id="cb2"><label for="cb2">Item 2</label></div>
        <div class="associated-item"><input type="checkbox" id="cb3"><label for="cb3">Item 3</label></div>
        <div class="associated-item"><input type="checkbox" id="cb4"><label for="cb4">Item 4</label></div>
        <div class="associated-item"><input type="checkbox" id="cb5"><label for="cb5">Item 5</label></div>
        <div class="associated-item"><input type="checkbox" id="cb6"><label for="cb6">Item 6</label></div>
    </div>
</div>

CSS

/* Associated items */
.associated-items {
    background-color: #CCCCCC;
    width: 200px;
    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-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;
}