Collapsible grid animation using jquery

Question

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.

Vignesh Kumar · Answer

I tried it but no luck.

Prasenjit Dey · Answer

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 Kumar · Answer

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 Hussain · Answer

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 Kumar · Answer

Expand/Collapse is fine. I want to do animation for the grid rows.

Iftikar Hussain · Answer

Hi Try to implement expand-collapse using javascript instead of codebehind. Regards Iftikar

Vignesh Kumar · Answer

I tried it and its not working. Attached is the aspx code.

Prasenjit Dey · Answer

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