Accordion Arrows

This is one way to have up/down or open/close arrows appear on an AJAX AccordionPane. First add a div and an img to the Header of the AccordionPane along with the title (the example uses ‘Add Widget’).

<cc1:AccordionPane ID="apTest" runat="server" >
<Header>
<div id="div1" onclick="UpDownIcons('imgAcc')">
Add Widget   <img src="Images/arrow_down.ico" id="imgAcc" alt="expand" />
</div>
</Header>

Note the onclick function for the div, that is where the change takes place. Here is the code for the ‘UpDownIcons’ javascript function.

function UpDownIcons(paneImg)
{
var clicked = document.getElementById(paneImg);
var currentIcon;
currentIcon = clicked.src.endsWith('arrow_down.png');
if(currentIcon)
clicked.src='App_Themes/MainTheme/Images/arrow_up.png';
else
clicked.src='App_Themes/MainTheme/Images/arrow_down.png';

var others = document.getElementsByTagName('img');
for(i=0; i<others.length; i++)
{
if(others[i].id!=clicked.id)
others[i].src = 'App_Themes/MainTheme/Images/arrow_down.png';
}
}

The first section of the script is necessary to flip the arrow when a user clicks on the same accordion to close it rather than a different accordion. The loop runs through the other imgs to switch their src.

You would need to change the img src to your image path and you would need to change the ‘arrow_down.ico’ in the currentIcon=img.src.endsWith line to match your icon names. Also this example assumes that this pane would be closed to begin with so the default src is the down arrow icon.