“Collapsible”

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:

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 :

BRAND


    

        
item 1
        
item 2
        
item 3
    

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/