?
Solved

Collapsible Div in CSS without Javascript?

Posted on 2009-02-19
6
Medium Priority
?
4,314 Views
Last Modified: 2013-11-19
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!
0
Comment
Question by:uzzidesign
  • 3
  • 3
6 Comments
 
LVL 5

Expert Comment

by:ritetek
ID: 23706431
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.
0
 
LVL 6

Author Comment

by:uzzidesign
ID: 23723938
Is it simple enough to go inline, can you show me?
0
 
LVL 5

Expert Comment

by:ritetek
ID: 23727157
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?
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 6

Author Comment

by:uzzidesign
ID: 23727447
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>
0
 
LVL 5

Accepted Solution

by:
ritetek earned 2000 total points
ID: 23727697
Below is some sample code.  Keep in mind, that it would be better to NOT declare javascript inline like this but since you mentioned it, I figured I would put it in like that.  Also, if you are using any kind of javascript framework this task would be much easier as there are built in functions in almost all the frameworks I have worked with for speeding up the hiding/showing of elements and for selecting them through the DOM as well.

Note, that while I used a method of getting the parent element of the link, and then selecting the p element from inside the parent, you could also select the next element, or change the p to a span/div/whatever (you would need to change "...getElementsByTagName('p')..." to "...getElementsByTagName('div')...", etc.).  There are a number of ways of doing it.

Also, all you are doing here is swapping out a class on the p inside the li element.  You will need to write the styles for that depending on how you are styling your page.  If you want something more simple you could change out the last line of the javascript function to:

el.style.display = el.style.display == 'none' ? 'block' : 'none';

if you wanted to just toggle the display portion of the styles and didn't care about other styles on the element.

Anyway, there are a number of ways of doing it, as you can see; but I would recommend trying out a javascript framework for this type of thing if you are going to use css effects often since they have a lot of neat built-in functions for doing stuff like this.  JQuery, Mootools, and Prototype are the three main products I have used (they are all free).  I personally prefer mootools as it's animation effects are pretty powerful, but they are all great tools for mixing standards html coding with the power of javascript and css.


<!-- LIST -->
<ul class="collapsibleMenu">
  <li>
    <a href="javascript: void(0);" onclick="toggle(this)">Link 1</a>
    <p>Lorem Ipsum Dolor etc...</p>
  </li>
  <li>
    <a href="javascript: void(0);" onclick="toggle(this)">Link 2</a>
    <p>Lorem Ipsum Dolor etc...</p>
  </li>
  <li>
    <a href="javascript: void(0);" onclick="toggle(this)">Link 3</a>
    <p>Lorem Ipsum Dolor etc...</p>
  </li>
</ul>
 
//Javascript
function toggle(el) {
  //reassign el to the element we want to show/hide
  el = el.parentElement.getElementsByTagName('p')[0];
  
  //set the class to hide or show based on what it is right now
  el.className = el.className == "show" ? "hide" : "show";
}

Open in new window

0
 
LVL 6

Author Closing Comment

by:uzzidesign
ID: 31548870
thanks!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to dynamically set the form action using jQuery.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Suggested Courses

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question