Collapsible Div in CSS without Javascript?
Is it possible to create a collapsible div using CSS only? I know you can do this with Javascript, but I am curious if there is some way of simulating an asynchronous show/hide action on-click. What I want to do is on-click show or hide a div, similar to how a CSS drop-down menu will show/hide a list item on-hover. So, is there a way to do it on-click with CSS without reloading the page? I don't know of any pseudo-classes that will allow this.
Finally, will the solution be IE6/IE7 compatible?
Thanks!
Finally, will the solution be IE6/IE7 compatible?
Thanks!
As far as I know there is no pseudo-class for click in CSS, however you could write two classes, and use very simple javascript to swap out the classes for the "hide" and "show" states.
ASKER
Is it simple enough to go inline, can you show me?
What is the structure of your page? The javascript would vary based on how you have your triggers and containers placed. Could you give me a sample?
ASKER
I haven't written it yet, but it is going to be a simple list. not sure if either of these are right.
<div class="hide"><li><a class="show" href="#">Item 1</a></li></div>
<div class="hide"><li><a class="show" href="#">Item 2</a></li></div>
<div class="hide"><li><a class="show" href="#">Item 3</a></li></div>
<div class="hide"><li><a class="show" href="#">Item 4</a></li></div>
or
<li class="hide"><a class="show" href="#">Item 1</a></li>
<li class="hide"><a class="show" href="#">Item 2</a></li>
<li class="hide"><a class="show" href="#">Item 3</a></li>
<li class="hide"><a class="show" href="#">Item 4</a></li>
Basically, I want the list item, on click, to expand to show more detailed information below that list item:
<li class="show"><a class="show" href="#">Item 1</a><br />
Expanded Info Expanded Info Expanded Info Expanded Info</li>
<li class="hide"><a class="show" href="#">Item 2</a></li>
<li class="hide"><a class="show" href="#">Item 3</a></li>
<li class="hide"><a class="show" href="#">Item 4</a></li>
<div class="hide"><li><a class="show" href="#">Item 1</a></li></div>
<div class="hide"><li><a class="show" href="#">Item 2</a></li></div>
<div class="hide"><li><a class="show" href="#">Item 3</a></li></div>
<div class="hide"><li><a class="show" href="#">Item 4</a></li></div>
or
<li class="hide"><a class="show" href="#">Item 1</a></li>
<li class="hide"><a class="show" href="#">Item 2</a></li>
<li class="hide"><a class="show" href="#">Item 3</a></li>
<li class="hide"><a class="show" href="#">Item 4</a></li>
Basically, I want the list item, on click, to expand to show more detailed information below that list item:
<li class="show"><a class="show" href="#">Item 1</a><br />
Expanded Info Expanded Info Expanded Info Expanded Info</li>
<li class="hide"><a class="show" href="#">Item 2</a></li>
<li class="hide"><a class="show" href="#">Item 3</a></li>
<li class="hide"><a class="show" href="#">Item 4</a></li>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
thanks!