How to apply transition effect in gridview expand/collapse script

See more:

ASP.NET

Javascript

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 (div.style.display == "none") {
            div.style.display = "inline";
            img.src = "Img1/minus.gif";
        } else {
            div.style.display = "none";
            img.src = "Img1/plus.gif";
        }
    }
</script>

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

What I have tried:

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