Change image in AccordionPane Header on collapse and expand

Here's how to use image in AccordionPane header and change the image on expand and collapse.

Step 1: Create an Accordion with three AccordionPane

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true">
<Panes>
<ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server">
<Content>
First Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server">
<Content>
Second Accordion Pane
Content>
ajaxToolkit:AccordionPane>
<ajaxToolkit:AccordionPane ID="AccordionPane3" runat="server">
<Content>
Third Accordion Pane
Content>
ajaxToolkit:AccordionPane>
Panes>
ajaxToolkit:Accordion>

Step 2: Add

in each AccordionPane like below. Header contains anchor and image, anchor tag invokes javascript meethod ChangeImage. The id of the image needs to passed to ChangeImage javascript. The id of the image should be same followed by 1,2 and 3 etc because we need to chane image(Collapse Image) of previously opened accordion pane.

This header will go in the AccordionPane with ID AccordionPane1

<Header>
<a href="" onclick="ChangeImage('imgAcc1');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc1" />Accordion Image Demo1a>
Header>

This header will go in the AccordionPane with ID AccordionPane2

<Header>
<a href="" onclick="ChangeImage('imgAcc2');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc2" />Accordion Image Demo2a>
Header>

This header will go in the AccordionPane with ID AccordionPane3

<Header>
<a href="" onclick="ChangeImage('imgAcc3');" class="accordionLink">
<img src="right_arrow.jpg" id="imgAcc3" />Accordion Image Demo3a>
Header>

Step 3: Add ChangeImage javascript, while loop will execute less than or equal to number of images.

<script language="javascript" type="text/javascript">
function ChangeImage(imgID)
{
var imgURL = document.getElementById(imgID).src.split('/');
if(imgURL[imgURL.length - 1] == 'down_arrow.jpg')
{
document.getElementById(imgID).src = "right_arrow.JPG";
}
else
{
document.getElementById(imgID).src = 'down_arrow.jpg';
}
var cnt = 1;
while(cnt <= 3)
{
var imgIdRec = "imgAcc" + cnt;
if(document.getElementById(imgIdRec)!= 'null' && imgIdRec != imgID)
{
var imgURL = document.getElementById(imgIdRec).src.split('/');
document.getElementById(imgIdRec).src = "right_arrow.JPG";
}
cnt = cnt + 1;
}
}
script>

Visit www.dotnetspeaks.com for live Demo and download the code