Aruna Aruna - 3 months ago 10
Javascript Question

how to apply transition effect in expand/collapse inside gridview rows

Below Javascript function is used to expand/collapse the gridview rows

<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 below and its working fine but its expanding immediately. I want to expand the panel slowly. How can I apply the css transition effect in it. I dont know where to apply the css. can anyone help me.

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

Answer

For the expansion, you can add the CSS transition property like so:

#element_id { transition: all 1s ease }

The all refers to the properties that will be affected by the transition. If you only want the transition to affect width, replace that part with width.

However, your example involves updating the element's display property to none, which can cause silly things to happen e.g. setting display: none via JavaScript will cause the element to be immediately removed from view. You'll have to try something like using a setTimeout the same length as your width transition:

function divexpandcollapse(divname) {
    var div = document.getElementById(divname);
    var img = document.getElementById('img' + divname);
    if (div.style.display == "none") {
        div.style.display = "inline-block"; // allows width to be altered
        div.style.width = "100px"; // or whatever desired width is
        img.src = "Img1/minus.gif";
    } else {
        div.style.width = "0px"; // initializes transition;
        setTimeout(function(){
            div.style.display = "none"; // will happen after transition..
        }, 1000); // ..bc we set the transition time to 1s in css
        img.src = "Img1/plus.gif";
    }
}