I have a list of clients grouped into categories. The list is very long, so I only want to show the categories and then expand the category to show the clients if it is clicked on. Is this possible to do in pure CSS or do I need to use a bit of Javascript? Any pointers?...

___________________________________
* Sorry... how do you do that again?... *

javascript is the way to go, i got some nice clean code for it if you need.

regards

Dave Thomas
<b>DMX Zone Manager</b>

I did a bit of searching and found this:

HMTL

<pre id=code><font face=courier size=2 id=code>&lt;div id="on"&gt;&lt;a href="javascript: expandCollapse('expand', 'on');"&gt;Expand Layer&lt;/a&gt;&lt;/div&gt;
&lt;div id="expand" style="display: none;"&gt;&lt;a href="javascript: expandCollapse('expand', 'on');"&gt;Collapse Layer&lt;/a&gt;&lt;/div&gt;</font id=code></pre id=code>

JAVASCRIPT

<pre id=code><font face=courier size=2 id=code>function expandCollapse() {
for (var i=0; i&lt;expandCollapse.arguments.length; i++) {
var element = document.getElementById(expandCollapse.arguments[i]);
element.style.display = (element.style.display == "none" ? "block" : "none";
}
}</font id=code></pre id=code>

This works great if you only have one div you want to expand. However, I've got multiple divs. I got it working by duplicating the function and html code multiple times and editing the relevant bits, ie expandCollapse1, ExpandCollapse2, expand1, on1, expand2, on2 etc.. It works, but my code is about a million miles long now. Do you have any easy tips on editing the code. I'm guessing that you would need to set up some kind of array, but I don't know how to do that.

___________________________________
* Sorry... how do you do that again?... *

this is the javascript u need

<pre id=code><font face=courier size=2 id=code><font color=red>
&lt;script language="JavaScript"&gt;
&lt;!--
function expand(param)
{
param.style.display=(param.style.display=="none"?"":"none";
}
//--&gt;
&lt;/script&gt;
</font id=red></font id=code></pre id=code>

good thing about this is you can have as many divs as you want.

just call it by id

<pre id=code><font face=courier size=2 id=code>
&lt;a href="javascript:expand(document.getElementById('div1'))"&gt;Title 1&lt;/a&gt;
&lt;div class="dottedBorders" id="div1" width="300px" style="display:none"&gt;
&lt;p&gt;some text&lt;/p&gt;
&lt;/div

&lt;a href="javascript:expand(document.getElementById('div2'))"&gt;Title 2&lt;/a&gt;
&lt;div class="dottedBorders" id="div2" style="display:none"&gt;
&lt;p&gt;some text&lt;/p&gt;
&lt;/div
</font id=code></pre id=code>

etc, etc.
just change the both id's in each div segment

regards

Dave Thomas
<b>DMX Zone Manager</b>

This is pretty close to what I want as well...but here's what I want...

toggle As
toggle Bs
toggle Cs
toggle Ds


&lt;div name="eventA" class="eventA"&gt;AAA&lt;/div&gt;
&lt;div name="eventB" class="eventB"&gt;BBB&lt;/div&gt;
&lt;div name="eventC" class="eventC"&gt;CCC&lt;/div&gt;
&lt;div name="eventD" class="eventD"&gt;DDD&lt;/div&gt;
&lt;div name="eventA" class="eventA"&gt;AAA&lt;/div&gt;
&lt;div name="eventB" class="eventB"&gt;BBB&lt;/div&gt;
&lt;div name="eventA" class="eventA"&gt;AAA&lt;/div&gt;
&lt;div name="eventC" class="eventC"&gt;CCC&lt;/div&gt;
&lt;div name="eventD" class="eventD"&gt;DDD&lt;/div&gt;


When I click on the toggles, I want the lines to collapse/expand. But I want all the AAA lines to go when I hit the "toggle As" line. Same for Bs, etc.

Can this be done?