Geek Answers Handbook

Foldable <div>

I'm having problems with what I'm trying to hide until the user clicks on the item.

HTML looks like this:

<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 also tried using: focus and: hover subclasses, but it still won't work, the div will remain hidden, no matter what.

I am trying to achieve this without using javascript if possible.

What am I doing wrong here?

Thanks, hope someone helps in helping.

+4
source share
2 answers

Your sidebarlistscroll DIV will appear after H3 not inside H3 . Write like this:

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

If you want the div to remain visible after you stop clicking on it. Then you need to make some changes to 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 out http://jsfiddle.net/BU4Qt/

+8
source

Is this what you want...?

Style:

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

HTML:

  <h3 class="filter-type">BRAND</h3> <p onclick="this.innerHTML='<div><ul><li>item 1</li><li>item 2</li><li>item 3</li></ul></div>'">Click Here</p>
+1
source

More articles:


All Articles