wishiwasageek
05-26-2005, 04:22 AM
:o Ok. I totally ripped some javascript off Microsoft.
I don't program very well in javascript (more of a highlevel understanding... ;) )
There are heaps easier scripts I'm sure, some even on this site.
I've found script for everything but changing the images (should this be in style?? not javascript bit?)
Also I don't like having the expanded paragraph text in the javascript, as sometimes the expanded bits are really big.
Aim:
When you click on text(a link) with a small right arrow next to it, the hidden div expands.
BUT the arrow changes to a small down arrow
when you click again on the link, the div collapses (is hidden again) and the arrow returns to a small right arrow.
Happy for you to point me to the right code (especially if it's simpler!)
thanks as always,
WIWAG
Attached/included is the javascript and also the html code.
This works in IE6.0 but not Firefox 1.04
function Outline2(){
window.event.returnValue=0
//Expand or collapse if a list item is clicked.
var open = event.srcElement;
//Verify that the tag which was clicked was either the
//trigger tag or nested within a trigger tag.
var el = checkParent(open,"A");
if(null != el)
{
var incr=0;
var elmPos = 0;
var parentSpan;
var fBreak
//Get the position of the element which was clicked
elemPos = window.event.srcElement.sourceIndex;
//Search for a SPAN tag
for (parentSpan = window.event.srcElement.parentElement;
parentSpan!=null;
parentSpan = parentSpan.parentElement)
{
//test if already at a span tag
if (parentSpan.tagName=="DIV")
{
//alert("Parent Element is a SPAN");
incr=1;
break;
}
//Test if the tag clicked was in a body tag or in any of the possible kinds of lists
//we perform this test because nested lists require special handling
if (parentSpan.tagName=="BODY" || parentSpan.tagName=="UL" || parentSpan.tagName=="OL"|| parentSpan.tagName=="P")
{
//Determine where the span to be expanded is.
for (incr=1; (elemPos+incr) < document.all.length; incr++)
{
//verify we are at an expandable Div tag
if(document.all(elemPos+incr).tagName=="DIV" &&
(document.all(elemPos+incr).className=="expanded" ||
document.all(elemPos+incr).className=="collapsed"))
{
fBreak=1;
break;
}
//If the next tag following the list item (li) is another
//list item(li) return in order to prevent accidentally opening
//the next span in the list
else if(document.all(elemPos+incr).tagName=="LI")
{
return;
}
}
}
//determine if we need to break out of the while loop (kind of a kludge since theres no goto in javascript)
if(fBreak==1)
{
break;
}
}
}
else
{
//Alert("Return!");
return;
}
//Now that we've identified the span, expand or collapse it
if(document.all(elemPos+incr).className=="collapsed")
{
document.all(elemPos+incr).className="expanded"
document.all(elemPos+1).src="../images/bluedrop.gif";
if(open.tagName=="IMG"){open.src="../images/bluedrop.gif";}
if(open.tagName=="B")
{
if(open.parentElement.all.tags("IMG").length != 0)
{open.parentElement.all.tags("IMG").item(0).src="../images/bluedrop.gif";}
}
}
else if(document.all(elemPos+incr).className=="expanded")
{
document.all(elemPos+incr).className="collapsed"
document.all(elemPos+1).src="../images/blueup.gif";
if(open.tagName=="IMG"){open.src="../images/blueup.gif";}
if(open.tagName=="B")
{
if(open.parentElement.all.tags("IMG").length != 0)
{open.parentElement.all.tags("IMG").item(0).src="../images/blueup.gif";}
}
}
else
{
return;
}
event.cancelBubble = true;
// open.scrollIntoView(true);
}
function checkParent(src,dest)
{
//Search for a specific parent of the current element.
while(src !=null)
{
if(src.tagName == dest)
{
return src;
}
src = src.parentElement;
}
return null;
}
<head>
<title>Untitled</title>
<script LANGUAGE="JavaScript" src="../scripts/ExpCollapse.js"></SCRIPT>
</head>
<body>
<a href="#" class="DropDown" onclick="Outline2()" id="ddlink">
<img border=0 src="../images/blueup.gif">NAME OF DROPDOWN
</A><BR>
<DIV id="ExpCol" class="collapsed" border="0"><BR>
<p> text for dropdown goes here. <BR>
</div>
</body>
I don't program very well in javascript (more of a highlevel understanding... ;) )
There are heaps easier scripts I'm sure, some even on this site.
I've found script for everything but changing the images (should this be in style?? not javascript bit?)
Also I don't like having the expanded paragraph text in the javascript, as sometimes the expanded bits are really big.
Aim:
When you click on text(a link) with a small right arrow next to it, the hidden div expands.
BUT the arrow changes to a small down arrow
when you click again on the link, the div collapses (is hidden again) and the arrow returns to a small right arrow.
Happy for you to point me to the right code (especially if it's simpler!)
thanks as always,
WIWAG
Attached/included is the javascript and also the html code.
This works in IE6.0 but not Firefox 1.04
function Outline2(){
window.event.returnValue=0
//Expand or collapse if a list item is clicked.
var open = event.srcElement;
//Verify that the tag which was clicked was either the
//trigger tag or nested within a trigger tag.
var el = checkParent(open,"A");
if(null != el)
{
var incr=0;
var elmPos = 0;
var parentSpan;
var fBreak
//Get the position of the element which was clicked
elemPos = window.event.srcElement.sourceIndex;
//Search for a SPAN tag
for (parentSpan = window.event.srcElement.parentElement;
parentSpan!=null;
parentSpan = parentSpan.parentElement)
{
//test if already at a span tag
if (parentSpan.tagName=="DIV")
{
//alert("Parent Element is a SPAN");
incr=1;
break;
}
//Test if the tag clicked was in a body tag or in any of the possible kinds of lists
//we perform this test because nested lists require special handling
if (parentSpan.tagName=="BODY" || parentSpan.tagName=="UL" || parentSpan.tagName=="OL"|| parentSpan.tagName=="P")
{
//Determine where the span to be expanded is.
for (incr=1; (elemPos+incr) < document.all.length; incr++)
{
//verify we are at an expandable Div tag
if(document.all(elemPos+incr).tagName=="DIV" &&
(document.all(elemPos+incr).className=="expanded" ||
document.all(elemPos+incr).className=="collapsed"))
{
fBreak=1;
break;
}
//If the next tag following the list item (li) is another
//list item(li) return in order to prevent accidentally opening
//the next span in the list
else if(document.all(elemPos+incr).tagName=="LI")
{
return;
}
}
}
//determine if we need to break out of the while loop (kind of a kludge since theres no goto in javascript)
if(fBreak==1)
{
break;
}
}
}
else
{
//Alert("Return!");
return;
}
//Now that we've identified the span, expand or collapse it
if(document.all(elemPos+incr).className=="collapsed")
{
document.all(elemPos+incr).className="expanded"
document.all(elemPos+1).src="../images/bluedrop.gif";
if(open.tagName=="IMG"){open.src="../images/bluedrop.gif";}
if(open.tagName=="B")
{
if(open.parentElement.all.tags("IMG").length != 0)
{open.parentElement.all.tags("IMG").item(0).src="../images/bluedrop.gif";}
}
}
else if(document.all(elemPos+incr).className=="expanded")
{
document.all(elemPos+incr).className="collapsed"
document.all(elemPos+1).src="../images/blueup.gif";
if(open.tagName=="IMG"){open.src="../images/blueup.gif";}
if(open.tagName=="B")
{
if(open.parentElement.all.tags("IMG").length != 0)
{open.parentElement.all.tags("IMG").item(0).src="../images/blueup.gif";}
}
}
else
{
return;
}
event.cancelBubble = true;
// open.scrollIntoView(true);
}
function checkParent(src,dest)
{
//Search for a specific parent of the current element.
while(src !=null)
{
if(src.tagName == dest)
{
return src;
}
src = src.parentElement;
}
return null;
}
<head>
<title>Untitled</title>
<script LANGUAGE="JavaScript" src="../scripts/ExpCollapse.js"></SCRIPT>
</head>
<body>
<a href="#" class="DropDown" onclick="Outline2()" id="ddlink">
<img border=0 src="../images/blueup.gif">NAME OF DROPDOWN
</A><BR>
<DIV id="ExpCol" class="collapsed" border="0"><BR>
<p> text for dropdown goes here. <BR>
</div>
</body>