View Full Version : Collapsible/Expandable divs not working! [Edit: Need help with rollover cursor]

10-16-2005, 07:28 AM
Hello everyone!

Thanks so much for dropping into my thread, I appreciate your time.

I'm creating a mini little directory of book publishers, for my website on fiction writing. I found a neat javascript code online that allows me to collapse and expand chunks of text, by clicking on the paragraph title. It uses divs and some sort of display property.

All was going well, and I kept testing it every couple of minutes (each time I adjusted something like background colour, a table layout etc). It was working perfectly up until about an hour ago. I don't know what I changed, but now only the first div works.

Check out the page here: http://georgia.forestofimagination.com/Fiction/publishers.html

You'll notice that when you click on AMERICA the inner layer opens just fine (and closes when you click it again.) But none of the following categories do the same.

I can't find what I've done wrong. I'm new to this code. Please take a look at the page source and tell me what the error is. I bet I did something stupid like delete an apostrophe somewhere - but I can't tell!

Thanks for trying to help me, have a great day!


10-16-2005, 07:42 AM
Just change all occurances of: toggleDisplay0(event)



10-16-2005, 08:22 AM
Hi dialbo!

I love that quote your signature - hahaha!

Thanks so much for your help. It works perfectly now! *hug* Thank you thank you!

I really should take some programming classes or something.....


10-16-2005, 10:49 AM
I'm posting here again because I also would like to know if there is a way to make the cursor change to a hand when it goes over one of the category names, like AMERICA or UNITED KINGDOM. Currently, it defaults to a text cursor (the I thing).

I'd like to emphasise (to dummy users) that the country names are clickable by making the cursor change to a hand when it hovers over a category title. Anyone know what code to put where to make this happen?

Thanks again all! You're a great bunch.

10-16-2005, 07:28 PM
In the css code, add cursor: pointer; to the outer class.
Then add cursor: default; to the inner class.


.outer {border: 1px solid black; background-color: #FFFFFF;
color: #000000; padding: 5px; cursor: pointer;}
.inner {border: 1px solid black; background-color: #F6ECDA;
color: #000000; padding: 5px; cursor: default;}

10-17-2005, 09:08 AM
Thanks again diablo! It works perfectly now. You've been fantastic. :D