Collapsible grid animation using jquery

Vignesh Kumar

13y3.1k.NET

Hi,
I have a collapsible grid and I need to do animation for that. The grid has rows and when I click on rows a fade-in and fade-out has to happen.
Similar to this http://api.jquery.com/slideToggle/#slideToggle-options - Refer first example. Attached is the grid to be animated.

8 Replies

Know the answer? Post it — somebody with the same question will find it here.

Vignesh Kumar13y ago
I tried it, but no luck.
Prasenjit Dey13y ago
Concentrate on below section :

function divexpandcollapse(divname) {

var div = document.getElementById(divname);

var img = document.getElementById('img' + divname);

if (div.style.display == "none") {
$("#div").fadeIn();
$("#div").fadeIn("slow");
$("#div").fadeIn(3000);
div.style.display = "inline";
img.src = "minus.gif";
} else {
div.style.display = "none";

img.src = "plus.gif";

}
}

correct javascript and jquery problem
Vignesh Kumar13y ago
Hi,

I have lot of pages with this functionality. If I am going to change then probably its going to be very tedious on expand/collapse. So trying to figure out how to achieve animation functionality with changing the code behind. Can you suggest on this!
Iftikar Hussain13y ago
yes, for animation only I am asking to first change your code to javascript. after that can be implement fade-in and fade-out

Regards,
Iftikar
Vignesh Kumar13y ago
Expand/Collapse is fine. I want to do animation for the grid rows.
Iftikar Hussain13y ago
Hi,
Try to implement expand-collapse using javascript instead of codebehind.

Regards,
Iftikar
Vignesh Kumar13y ago
I tried it and its not working. Attached is the aspx code.
Prasenjit Dey13y ago
Refer that link :
http://www.aspdotnet-suresh.com/2012/05/gridview-with-in-gridview-or-nested.html

study that link and add slide up and slide down function in jquery code with your operation div