Help with +/- button in expand/collapse codes w/o js involved, I know nuts about javascript Options

[immanoob]

HI.
okay, so this is my first time asking a question, or joining a forum. so please be kind anywho, i've came across a particular code that can do almost exactly what i want & i've tweaked it here and there to somehow meet my own requirement, the only thing missing is that it doesn't include the [+] and [-] images to denote that the text can be expanded or collapsed.

so this here is the code & i would really appreaciate it if someone can help me extend this code to include the [+]/[-]. i know nuts about javascript, so it'll be helpful if it doesn't include any (: THANKS in advance

[<script>
var toggledDisplay = new Object();
toggledDisplay['sub1'] = true;
toggledDisplay['sub2'] = true;
toggledDisplay['sub3'] = true;

function toggleDisplay(bDisplayed)
{
if(!document.getElementById || toggleDisplay.arguments.length < 2) return;
var displayed = new Object();
displayed['true'] = 'block';
displayed['false'] = 'none';
for(var i = 1; i < toggleDisplay.arguments.length; i++)
{
oDisplay = document.getElementById(toggleDisplay.arguments[i]);
if(oDisplay)
{
oDisplay.style.display = displayed[bDisplayed];
// mozilla is the only browser out of the lot that can't get this right. so, if we're
// setting an object's display style to block, we gotta reload any images contained
// within that block. mozilla won't do it for you like every other browser that
// supports the functionality of changing the display style dynamically.
// begin crap browser hack
if(bDisplayed)
{
oImages = oDisplay.getElementsByTagName('IMG');
for(var j = 0; j < oImages.length; j++)
oImages[j].src = oImages[j].src;
}
// end mozilla, err, crap browser hack
if(typeof toggledDisplay[toggleDisplay.arguments[i]] != 'undefined')
toggledDisplay[toggleDisplay.arguments[i]] = !bDisplayed;
}
}
}

</SCRIPT>
<A title="" onclick="toggleDisplay(true, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');" href="java script://" target="">Expand All</A> | <A title="" onclick="toggleDisplay(false, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7');" href="java script://" target="">Collapse All</A> <FONT color=#000000>

<A title="" onclick="toggleDisplay(toggledDisplay['sub1'], 'sub1')" href="java script://" target="">Text</A>
<div id=sub1>
i'm a text. leave me be.</div>

<p><A title="" onclick="toggleDisplay(toggledDisplay['sub2'], 'sub2')" href="java script://" target="">Another text</A></TD></TR>
<div id=sub2>
I'm another text, be kind to me.</div>
<script language=JavaScript type=text/javascript>
<!--
toggleDisplay(false, 'sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7');
toggleDisplay(true, 'toggleAll');
//-->
</SCRIPT>]

[Darin McGrew]

This isn't about Markup, so I'm moving it to the Client-side Scripting forum.

[pandy]

Just put the <img...> where you already have the link text.
<image src="" width=" height="" alt=""> Expand all

[immanoob]

Hi pandy.

erhm, i did. but the image didn't change. i kinda need it to change from a + to -. that is, + when it is collapsed and - when its expanded

[pandy]

You need two images. Change the + one to the - one when the section is expanded.

[immanoob]

You need two images. Change the + one to the - one when the section is expanded.

Hello (:

yes! i have 2 imgs finally. but i cnt get it to change upon clicking. i'll get the codes soon (:

[immanoob]

You need two images. Change the + one to the - one when the section is expanded.

Hello (:

yes! i have 2 imgs finally. but i cnt get it to change upon clicking. i'll get the codes soon (:

Hi, I'm back with the updated code. it contains the image, there's only one for the time being. it's an arrow that is supposed to act as the [+] sign when the entire thing is collapsed (onLoad). i don't know where to put the other image, which is supposed to act as the [-] sign when the content is expanded. i've censored the contents because its company-related.
please try to help. greatly appreciated

CODE

<FONT face=arial,helvetica,sans-serif size=3><STRONG>Headline</FONT></STRONG>
<P style="MARGIN: 0px"> </P>
<P style="MARGIN: 0px"><FONT face=arial,helvetica,sans-serif size=2>About the office</FONT>
<P style="MARGIN: 0px"> 
<P style="MARGIN: 0px"></P>
<P style="MARGIN: 0px">
<script>
var toggledDisplay = new Object();
toggledDisplay['sub1'] = true;
toggledDisplay['sub2'] = true;
toggledDisplay['sub3'] = true;
toggledDisplay['sub4'] = true;
toggledDisplay['sub5'] = true;
toggledDisplay['sub6'] = true;
toggledDisplay['sub7'] = true;
toggledDisplay['sub8'] = true;
toggledDisplay['sub9'] = true;
toggledDisplay['sub10'] = true;
toggledDisplay['sub11'] = true;
toggledDisplay['sub12'] = true;
toggledDisplay['sub13'] = true;
function toggleDisplay(bDisplayed)
{
if(!document.getElementById || toggleDisplay.arguments.length < 2) return;
var displayed = new Object();
displayed['true'] = 'block';
displayed['false'] = 'none';
for(var i = 1; i < toggleDisplay.arguments.length; i++)
{
oDisplay = document.getElementById(toggleDisplay.arguments[i]);
if(oDisplay)
{
oDisplay.style.display = displayed[bDisplayed];
// mozilla is the only browser out of the lot that can't get this right. so, if we're
// setting an object's display style to block, we gotta reload any images contained
// within that block. mozilla won't do it for you like every other browser that
// supports the functionality of changing the display style dynamically.
// begin crap browser hack
if(bDisplayed)
{
oImages = oDisplay.getElementsByTagName('IMG');
for(var j = 0; j < oImages.length; j++)
oImages[j].src = oImages[j].src;
}
// end mozilla, err, crap browser hack
if(typeof toggledDisplay[toggleDisplay.arguments[i]] != 'undefined')
toggledDisplay[toggleDisplay.arguments[i]] = !bDisplayed;
}
}
}
</SCRIPT>
<A title="" onclick="toggleDisplay(true, 'sub1', 'sub2', 'sub3' , 'sub4', 'sub5', 'sub6', 'sub7', 'sub8', 'sub9', 'sub10', 'sub11', 'sub12', 'sub13');" href="java script://" target=""><FONT face=arial,helvetica,sans-serif size=2>Expand All</FONT></A><FONT face=arial,helvetica,sans-serif size=2> | </FONT><A title="" onclick="toggleDisplay(false, 'sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7', 'sub8', 'sub9', 'sub10', 'sub11', 'sub12', 'sub13');" href="java script://" target=""><FONT face=arial,helvetica,sans-serif size=2>Collapse All</FONT></A> </P>
<P style="MARGIN: 0px"><FONT color=#000000> </P>
<P style="MARGIN: 0px"></P>

<P style="MARGIN: 0px"><IMG src="expand.gif"><A title="" onclick="toggleDisplay(toggledDisplay['sub1'], 'sub1')" href="java script://" target=""><FONT face=arial,helvetica,sans-serif size=2><STRONG>Item 1</STRONG></FONT></A> </P>
<p></p>
<DIV id=sub1>
<P><FONT face=arial,helvetica,sans-serif size=2>About Item 1</P></DIV>

<P><IMG src="expand.gif"><A title="" onclick="toggleDisplay(toggledDisplay['sub2'], 'sub2')" href="java script://" target=""><FONT face=arial,helvetica,sans-serif size=2><STRONG>Item 2</STRONG></FONT></A></P>
<P></p>
<DIV id=sub2>
About Item 2</div>

<script language=JavaScript type=text/javascript>
<!--
toggleDisplay(false, 'sub1', 'sub2', 'sub3', 'sub4', 'sub5', 'sub6', 'sub7', 'sub8', 'sub9', 'sub10', 'sub11', 'sub12', 'sub13');
toggleDisplay(true, 'toggleAll');
//-->
</SCRIPT>
</FONT>
<P style="MARGIN: 0px"></P>

[pandy]

Make JS change the image at the same time as it shows the hidden stuff.

[immanoob]

Make JS change the image at the same time as it shows the hidden stuff.

Hi

okay, erhm, so how do i do that actually? because honestly, i never edit the script saved for the forms part and the toggle part. so i don't really know where to put what. could you help?

thanks

[Darin McGrew]

Please see the FAQ entry Where can I learn about JavaScript (LiveScript, JScript, ECMAScript, DOM)?