0

I want to Slide Down tabe row smoothly and Slowly.

The problem now is, it is instantly appearing and hiding, how can i make it smooth.

**Please check this fiddle:**

http://jsfiddle.net/5WT9g/2/

HTML:

<a href="javascript:void(0)" id="showContent">Show Content</a>
<br><br><br>
<table width="400" border="1">
    <tr id="mainContent" style="display:none;">
        <td> THIS IS MAIN CONTENT </td>
    </tr>
</table>

JS:

 $('#showContent').click(function ()
                         {



   $('#mainContent').slideToggle('slow');                      

                         });
Hassan Sardar
  • 4,413
  • 17
  • 56
  • 92

3 Answers3

3

I think you mean to use slideToggle() and not toggleslide().

However, the animation still won't work smoothly for table cells. It will work slightly more smoothly if you set a height for the tr. For a completely smooth animation, I recommend using divs instead.

Here is a modified version of your code that has a sort of smooth animation with tables: http://jsfiddle.net/TS77v/1/

As you can see, you will have to do the animation on the td, not the tr. I also had to set the height of the td for this to work, otherwise it will just appear and disappear.

Why doesn't the animation work properly on tables?

From "Learning jQuery" by Chaffer and Swedberg

Table rows present particular obstacles to animation, since browsers use different values (table-row and block) for their visible display property. The .hide() and .show() methods, without animation, are always safe to use with table rows. As of jQuery version 1.1.3, .fadeIn() and .fadeOut() can be used as well.

For your reference: https://stackoverflow.com/a/920480/3016565

Community
  • 1
  • 1
russellc
  • 494
  • 3
  • 7
1

It would be much easier with divs but if you prefer/need tables then tables it is. I'd do it by putting a div inside the table cell ja use the slideToggle to it. Yes, it still adds the div there but atleast you got the table structure. To make it work you need to do just a minor change to your HTML code, JS stays the same:

HTML

<a href="javascript:void(0)" id="showContent">Show Content</a>
<br><br><br>
<table width="400" border="1">
    <tr>
        <td><div style="display: none;" id="mainContent">THIS IS MAIN CONTENT</div></td>
    </tr>
</table>

And a fiddle: http://jsfiddle.net/32HR9/1/

AFTER GETTING THE INFORMATION THAT YOU CAN'T CHANGE THE HTML

I assume you can edit the javascript? You haven't said anything about that. This trick isn't neat but there's no need to change the HTML and it gets the job done:

So, with jQuery

  1. Make the tr visible.
  2. Wrap the content of the tr in a div.
  3. Hide the div.
  4. Make the slideToggle work with the created div.

with code

$('#mainContent').css('display', 'table-row');
$('#mainContent > td').wrapInner("<div class='hideshow'></div>");
$('.hideshow').css('display', 'none');

$('#showContent').click(function (){                        
    $('.hideshow').slideToggle('slow');                                           
});

and a fiddle: http://jsfiddle.net/5E5VS/7/

mMoovs
  • 934
  • 9
  • 18
0
 Try this.
 <a href="javascript:void(0)" id="showContent">Show Content</a>
 <table id="mainContent" width="400" border="1">
 <tr>
    <td> <p style="display: none"> THIS IS MAIN CONTENT</p></td>
  </tr>
</table>


 $("#showContent").click(function () {
 $('#mainContent').find("p").slideToggle();
 });
Girish Sakhare
  • 743
  • 7
  • 14