"Collapsible" <div>

Question

I'm having some trouble with a that I'm trying to keep hidden, until the user clicks on a element.

The HTML looks like:

<h3 class="filter-type">BRAND</h3>
<div class="sidebarlistscroll">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

And here is the CSS:

.filter-type {
    border-bottom: 1px dotted #666;
}

.sidebarlistscroll {
    width: 220px;
    height: 200px;
    margin-bottom: 15px;
    overflow-y: scroll;
    border: none;
    visibility: hidden;
}

.filter-type:active .sidebarlistscroll {
    visibility: visible;
}

I've also tried using :focus and :hover subclasses but still it won't work, the div stays hidden no matter what.

I'm trying to achieve this without using javascript if possible.

What am I doing wrong here?

Answer 1

Your sidebarlistscroll DIV come after the H3 not inside H3. Write like this:

.filter-type:active + .sidebarlistscroll {
    visibility: visible;
}

If you want the div to remain visible after when you stopped clicking on it. Then you have to do some changes in your code. Write like this :

<label class="filter-type" for="filter">BRAND</label>
<input type="checkbox" id="filter">
<div class="sidebarlistscroll">
    <ul>
        <li>item 1</li>
        <li>item 2</li>
        <li>item 3</li>
    </ul>
</div>

CSS

.filter-type {
    border-bottom: 1px dotted #666;
}

.sidebarlistscroll {
    width: 220px;
    height: 200px;
    margin-bottom: 15px;
    overflow-y: scroll;
    border: none;
    visibility: hidden;
}
#filter{display:none}
#filter:checked + .sidebarlistscroll{
    visibility: visible;
}

Check this http://jsfiddle.net/BU4Qt/