Animated Collapsible DIV - graphical indicator of opened/closed status?

[brian.goodman]

1) Script Title: Animated Collapsible DIV

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...edcollapse.htm

3) Describe problem: Any advice on the code required to put a plus or minus beside the link to indicate to users that this is an expandable / collapseable div? There is a good example of this at the University of Lethbridge site so you can easily see what I'm looking for:
http://www.uleth.ca/man/help/sitemap.shtml

Thanks,

Brian

[jscheuer1]

I think I've got this worked out. The attached .zip archive contains the updated script and a demo page showing two ways to use this new feature and a third collapsible division that doesn't use it.

Attachment 1156

As a side note, this update also contains a global collapseprevious variable that may be set to true (it is currently false) at the top of the animatedcollapse.js file. No editing of the animatedcollapse.js is necessary, unless you wish to change the collapseprevious setting. See the demo page for +/- sign indicator usage examples. All other things work as they did before.

Any questions, let me know.

[brian.goodman]

John,

Thank you very much for the incredibly quick response and for the quick solution. I have two questions:

1. I see that the indicator has a span class="ind". Is that class name essential to the operation of the script?
2. If I leave out the span, will the script operate as previously, without the +/- indicator?

Thanks,

Brian

[jscheuer1]

1. I see that the indicator has a span class="ind". Is that class name essential to the operation of the script?

No, it is used only to style the indicators. I used:

.ind {
font-family:monospace;
font-weight:bold;
font-size:130%;
color:red;
}

To get a nice look.

2. If I leave out the span, will the script operate as previously, without the +/- indicator?

Not exactly, I used the span tags with a class of ind just to have something to style. The thing that makes the script execute the indicator behaviors is having two elements, one with the id of id_name0 and another with the id of id_name1, where id_name is the the DIV_id name of the collapsible division instance and the id of its content area. You will notice that on the demo page included in my archive that you downloaded, the third collapsible division has no fish0 and fish1 elements. As a result, there is no indicator behavior for that instance. The DIV_id0 and DIV_id1 elements can be anything, images if you like, for example.

[nchristus]

is there a way to hide the span elements if javascript disabled? otherwise, both indicators appear.

[jscheuer1]

You can style them as visibility invisible or as display none. Have javascript reveal them.