I'm a new kid on the Javascript block, and desperately need some help with the following:
I have a small accordion menu in javascript (see below). I wish to add dynamic arrows to each accordion title element, so that an arrowUp or arrowDown image will display depending on whether the accordion element is open or closed.
I believe this will require changes in the js, the css and the html. One of the problems I face is that I am already using a background image for the accordion title, and now want to add a second (arrowUp/arrowDown) image. This requires (I think) a new <div> tag, but the new tag creates errors.
Many thanks to all the bigger kids out there who might help.
===========================
<script type="text/javascript">
var ContentHeight = 200;
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = ContentHeight + 'px';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}
</script>
<style type='text/css'>
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position: relative;
width: 300px; /*changeble*/
}
.AccordionTitle
{
height: 20px; /*changeble*/
overflow: hidden;
cursor: pointer;
font-family: Verdana; /*changeble*/
font-size: 12px; /*changeble*/
font-weight: normal; /*changeble*/
vertical-align: middle; /*changeble*/
text-align: center; /*changeble*/
display: table-cell;
-moz-user-select: none;
border-top: none; /*changeble*/
border-bottom: none; /*changeble*/
border-left: none; /*changeble*/
border-right: none; /*changeble*/
background-color: Green;
color: White;
}
.AccordionContent
{
height: 0px;
overflow: hidden; /*display: none; */
}
.AccordionContent_
{
height: auto;
}
.AccordionContainer
{
border-top: solid 1px #C1C1C1; /*changeble*/
border-bottom: solid 1px #C1C1C1; /*changeble*/
border-left: solid 1px #C1C1C1; /*changeble*/
border-right: solid 1px #C1C1C1; /*changeble*/
}
.ContentTable
{
width: 100%;
text-align: center;
color: White;
}
.ContentCell
{
background-color: #666666;
}
.ContentTable a:link, a:visited
{
color: White;
text-decoration: none;
}
.ContentTable a:hover
{
color: Yellow;
text-decoration: none;
}
</style>
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 1
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
I Am Accordion 1.
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 2
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
I Am Accordion 2.
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 3
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
I Am Accordion 3.
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 4
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
I Am Accordion 4.
</div>
</div>
I have a small accordion menu in javascript (see below). I wish to add dynamic arrows to each accordion title element, so that an arrowUp or arrowDown image will display depending on whether the accordion element is open or closed.
I believe this will require changes in the js, the css and the html. One of the problems I face is that I am already using a background image for the accordion title, and now want to add a second (arrowUp/arrowDown) image. This requires (I think) a new <div> tag, but the new tag creates errors.
Many thanks to all the bigger kids out there who might help.
===========================
<script type="text/javascript">
var ContentHeight = 200;
var TimeToSlide = 250.0;
var openAccordion = '';
function runAccordion(index)
{
var nID = "Accordion" + index + "Content";
if(openAccordion == nID)
nID = '';
setTimeout("animate(" + new Date().getTime() + "," + TimeToSlide + ",'"
+ openAccordion + "','" + nID + "')", 33);
openAccordion = nID;
}
function animate(lastTick, timeLeft, closingId, openingId)
{
var curTick = new Date().getTime();
var elapsedTicks = curTick - lastTick;
var opening = (openingId == '') ? null : document.getElementById(openingId);
var closing = (closingId == '') ? null : document.getElementById(closingId);
if(timeLeft <= elapsedTicks)
{
if(opening != null)
opening.style.height = ContentHeight + 'px';
if(closing != null)
{
closing.style.display = 'none';
closing.style.height = '0px';
}
return;
}
timeLeft -= elapsedTicks;
var newClosedHeight = Math.round((timeLeft/TimeToSlide) * ContentHeight);
if(opening != null)
{
if(opening.style.display != 'block')
opening.style.display = 'block';
opening.style.height = (ContentHeight - newClosedHeight) + 'px';
}
if(closing != null)
closing.style.height = newClosedHeight + 'px';
setTimeout("animate(" + curTick + "," + timeLeft + ",'"
+ closingId + "','" + openingId + "')", 33);
}
</script>
<style type='text/css'>
.AccordionTitle, .AccordionContent, .AccordionContainer
{
position: relative;
width: 300px; /*changeble*/
}
.AccordionTitle
{
height: 20px; /*changeble*/
overflow: hidden;
cursor: pointer;
font-family: Verdana; /*changeble*/
font-size: 12px; /*changeble*/
font-weight: normal; /*changeble*/
vertical-align: middle; /*changeble*/
text-align: center; /*changeble*/
display: table-cell;
-moz-user-select: none;
border-top: none; /*changeble*/
border-bottom: none; /*changeble*/
border-left: none; /*changeble*/
border-right: none; /*changeble*/
background-color: Green;
color: White;
}
.AccordionContent
{
height: 0px;
overflow: hidden; /*display: none; */
}
.AccordionContent_
{
height: auto;
}
.AccordionContainer
{
border-top: solid 1px #C1C1C1; /*changeble*/
border-bottom: solid 1px #C1C1C1; /*changeble*/
border-left: solid 1px #C1C1C1; /*changeble*/
border-right: solid 1px #C1C1C1; /*changeble*/
}
.ContentTable
{
width: 100%;
text-align: center;
color: White;
}
.ContentCell
{
background-color: #666666;
}
.ContentTable a:link, a:visited
{
color: White;
text-decoration: none;
}
.ContentTable a:hover
{
color: Yellow;
text-decoration: none;
}
</style>
<div id="AccordionContainer" class="AccordionContainer">
<div onclick="runAccordion(1);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 1
</div>
</div>
<div id="Accordion1Content" class="AccordionContent">
I Am Accordion 1.
</div>
<div onclick="runAccordion(2);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 2
</div>
</div>
<div id="Accordion2Content" class="AccordionContent">
I Am Accordion 2.
</div>
<div onclick="runAccordion(3);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 3
</div>
</div>
<div id="Accordion3Content" class="AccordionContent">
I Am Accordion 3.
</div>
<div onclick="runAccordion(4);">
<div class="AccordionTitle" onselectstart="return false;">
Accordion 4
</div>
</div>
<div id="Accordion4Content" class="AccordionContent">
I Am Accordion 4.
</div>
</div>