Collapsible Div in CSS without Javascript?: div css javascript html xhtml dhtml

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!

Instant Access to this Solution

Plus...

30 Day FREE access, no risk, no obligation

Collaborate with the world's top tech experts

Unlimited access to our exclusive solution database

Never be left without tech help again

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

"The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.

"Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin

"Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.

Screenshot of Experts Exchange Knowledgebase

Need individual assistance?

Our experts are ready to help.

If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.

Want to learn from the best?

Read articles from industry experts.

Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.

Working on a long term project?

Store your work and research.

Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.

Join the Community

Give a Little. Get a Lot.

Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.

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";
}

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:

Select all Open in new window

Question

Collapsible Div in CSS without Javascript?

Subscribe now for full access to Experts Exchange and get

Instant Access to this Solution

div css javascript html xhtml dhtml

Cascading Style Sheets (CSS)

Extensible HTML (XHTML)

Dynamic HTML (DHTML)

Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.

See what Experts Exchange can do for you.

Got a question?

We've got the answer.

Need individual assistance?

Our experts are ready to help.

Want to learn from the best?

Read articles from industry experts.

Working on a long term project?

Store your work and research.

What Makes Experts Exchange Unique?

Trusted by the world's most respected brands.

Faithfully serving IT professionals since 1996.

Related Solutions

Free Tech Articles

Cloud Class Webinars

Join the Community

Give a Little. Get a Lot.

Answers

3 Ways to Join

The Experts

The Experts

Testimonials

Testimonials

Testimonials

Business Clients

Business Clients

In the Press

In the Press

In the Press