Forums
This topic is locked
Expand Text on Click
Posted 04 Apr 2005 17:25:17
1
has voted
04 Apr 2005 17:25:17 Matt Bailey posted:
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?... *
Replies
Replied 05 Apr 2005 00:41:20
05 Apr 2005 00:41:20 Dave Thomas replied:
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>
regards
Dave Thomas
<b>DMX Zone Manager</b>
Replied 05 Apr 2005 15:23:32
05 Apr 2005 15:23:32 Matt Bailey replied:
I did a bit of searching and found this:
HMTL
<pre id=code><font face=courier size=2 id=code><div id="on"><a href="javascript: expandCollapse('expand', 'on');">Expand Layer</a></div>
<div id="expand" style="display: none;"><a href="javascript: expandCollapse('expand', 'on');">Collapse Layer</a></div></font id=code></pre id=code>
JAVASCRIPT
<pre id=code><font face=courier size=2 id=code>function expandCollapse() {
for (var i=0; i<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?... *
HMTL
<pre id=code><font face=courier size=2 id=code><div id="on"><a href="javascript: expandCollapse('expand', 'on');">Expand Layer</a></div>
<div id="expand" style="display: none;"><a href="javascript: expandCollapse('expand', 'on');">Collapse Layer</a></div></font id=code></pre id=code>
JAVASCRIPT
<pre id=code><font face=courier size=2 id=code>function expandCollapse() {
for (var i=0; i<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?... *
Replied 05 Apr 2005 16:21:48
05 Apr 2005 16:21:48 Dave Thomas replied:
this is the javascript u need
<pre id=code><font face=courier size=2 id=code><font color=red>
<script language="JavaScript">
<!--
function expand(param)
{
param.style.display=(param.style.display=="none"?"":"none";
}
//-->
</script>
</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>
<a href="javascript:expand(document.getElementById('div1'))">Title 1</a>
<div class="dottedBorders" id="div1" width="300px" style="display:none">
<p>some text</p>
</div
<a href="javascript:expand(document.getElementById('div2'))">Title 2</a>
<div class="dottedBorders" id="div2" style="display:none">
<p>some text</p>
</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>
<pre id=code><font face=courier size=2 id=code><font color=red>
<script language="JavaScript">
<!--
function expand(param)
{
param.style.display=(param.style.display=="none"?"":"none";
}
//-->
</script>
</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>
<a href="javascript:expand(document.getElementById('div1'))">Title 1</a>
<div class="dottedBorders" id="div1" width="300px" style="display:none">
<p>some text</p>
</div
<a href="javascript:expand(document.getElementById('div2'))">Title 2</a>
<div class="dottedBorders" id="div2" style="display:none">
<p>some text</p>
</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>
Replied 21 Nov 2007 01:47:17
21 Nov 2007 01:47:17 Rudy Richter replied:
This is pretty close to what I want as well...but here's what I want...
toggle As
toggle Bs
toggle Cs
toggle Ds
<div name="eventA" class="eventA">AAA</div>
<div name="eventB" class="eventB">BBB</div>
<div name="eventC" class="eventC">CCC</div>
<div name="eventD" class="eventD">DDD</div>
<div name="eventA" class="eventA">AAA</div>
<div name="eventB" class="eventB">BBB</div>
<div name="eventA" class="eventA">AAA</div>
<div name="eventC" class="eventC">CCC</div>
<div name="eventD" class="eventD">DDD</div>
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?
toggle As
toggle Bs
toggle Cs
toggle Ds
<div name="eventA" class="eventA">AAA</div>
<div name="eventB" class="eventB">BBB</div>
<div name="eventC" class="eventC">CCC</div>
<div name="eventD" class="eventD">DDD</div>
<div name="eventA" class="eventA">AAA</div>
<div name="eventB" class="eventB">BBB</div>
<div name="eventA" class="eventA">AAA</div>
<div name="eventC" class="eventC">CCC</div>
<div name="eventD" class="eventD">DDD</div>
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?