Geeks With Blogs
Bunch's Blog One day I'll have a catchy subtitle, one day

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&nbsp;&nbsp;&nbsp;<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.

Technorati Tags: ,,
Posted on Wednesday, June 24, 2009 3:35 AM | Back to top


Comments on this post: Accordion Arrows

# re: Accordion Arrows
Requesting Gravatar...
Once you put the div onclick in the header the accordion header click will no longer fire to expand or contract the content.

Can we make it fire from the java function ?
Left by Gary Eisert on Apr 17, 2012 12:14 AM

Your comment:
 (will show your gravatar)


Copyright © Bunch | Powered by: GeeksWithBlogs.net