Hello all!
I seem to have run into a quite frustrating problem involving JavaScript and the getElementsByName method.
What I am trying to do involves a expand/collapse content script. I got the content to expand and collapse fine, but along with the content expanding and collapsing I would like to have the arrow image which triggers the change (when the user click the image) to also change depending on the current status of the content.
In short, I want the arrow image to change depending on whether the content is collapsed or expanded.
What I have coded works fine with one image, but when I have more than one collapsible/expandable block of content (which means more than one arrow) I can't get the arrow that cooresponds to the content being changed to change.
What I am trying to do is use the getElementsByName method to change the arrow with the name that is also the ID of the content DIV.
With the code I currently have, when I click the arrow to expand the content the arrow completely disappears and the content does not expand. I can't seem to figure out what is causing this. When I call "document.getElementsByName(Result).src" before the function (to see if it's getting the correct image URL) using an alert message I get an output of "undefined." Why is this outputting "undefined" instead of the URL of the current image?
If anyone has any ideas or has a possible solution to make the arrows change on click it would be greatly aprreciated.
Code:
<HEAD>
<SCRIPT>
function DispContent(Result)
{
if(document.getElementById(Result).style.display == "none")
{
document.getElementById(Result).style.display = "block";
document.getElementsByName(Result).src = "Images/Arrow_Expanded.gif";
}
else
{
document.getElementById(Result).style.display = "none";
document.getElementsByName(Result).src = "Images/Arrow_Collapsed.gif";
}
}
</SCRIPT>
</HEAD>
<BODY>
[img]Images/Arrow_Collapsed.gif[/img] <B STYLE="margin-left: 5px;">On Sunday, January 01, the Pine-Richland Rams took on Null.[/B]
<DIV ID="010100" STYLE="display: none;">
<TABLE BORDER="0" FRAME="void" RULES="none" CELLSPACING="0" CELLPADDING="0" CLASS="Results">
<TR>
<TD WIDTH="70">Men:</TD>
<TD WIDTH="65">PR - 00</TD>
<TD WIDTH="65">Null - 00</TD>
</TR>
<TR>
<TD WIDTH="70">Women:</TD>
<TD WIDTH="65">PR - 00</TD>
<TD WIDTH="65">Null - 00</TD>
</TR>
</TABLE>
<FONT COLOR="#303030" CLASS="Results_Highlights" STYLE="font-weight: bold; font-style: italic;">Ram Highlights:</FONT>
<SPAN CLASS="Results_Highlights">Men:</SPAN>
<UL STYLE="margin-top: 5px;">
<LI CLASS="Results_Highlights">Lorem ipsum.</LI>[/list]
<SPAN CLASS="Results_Highlights">Women:</SPAN>
<UL STYLE="margin-top: 5px;">
<LI CLASS="Results_Highlights">Lorem ipsum.</LI>[/list]
</DIV>
</BODY>
I do not have the webpage uploaded yet, but if it would make debugging easier by looking at the entire source I don't mind uploading it.
Thanks again for any comments, suggestions, and help! ^_^
Regards,
Mike
Submit Your Article
Forum Rules
Reply With Quote
