Click here to Skip to main content
15,799,257 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
See more:
I m using Javascript function to expand/collapse the gridview rows. Following is the script.

<script type="text/javascript">
    function divexpandcollapse(divname) {
        var div = document.getElementById(divname);
        var img = document.getElementById('img' + divname);
        if ( == "none") {
   = "inline";
            img.src = "Img1/minus.gif";
        } else {
   = "none";
            img.src = "Img1/plus.gif";

In my gridview I m calling the javascript like this, its working fine but its expanding immediately. I want to expand the panel slowly. How to apply the transition effect and to which item I need to apply. Can anyone please help me...

<asp:TemplateField ItemStyle-Width="20px">
            <a href="JavaScript:divexpandcollapse('div<%# Eval("ClaimMasterId") %>');">
                <img id='imgdiv<%# Eval("ClaimMasterId") %>' width="9px" border="0" src="Img1/plus.gif"
                    alt="" /></a>                        
        <ItemStyle Width="20px" VerticalAlign="Middle"></ItemStyle>

What I have tried:

In between ItemTemplate, I used div style="transition-delay: 2s" but no effect

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900