CODEWITHSUNDEEP
javascriptjqueryhtmlslidedown
Abude
Abude

Reputation: 2162

How to make slideDown animation on a hidden row of table that needs to be shown?

I know that the animation is not possible on direct rows of a table besides show,hide and fade, but this is actually possible if you wrap the cell of the table inside a div with a display:block.

my issue is that it's working great on slideUp and not working on slideDown for the exact same example with the exact same logic.

the logic is pretty simple:

  1. add div to wrap the table cell
  2. apply the animation on the div
  3. hide/show the row of the table

my code is to have somethin like: JSfiddle

Is there anything wrong with my logic/Code ? Thanks!

Upvotes: 1

Views: 2094

Answers (2)

mikemjharris
mikemjharris

Reputation: 1

As this is a style issue you can use CSS to get the desired effect and use JQuery to add a class. This also gives a smoother transition - the jquery slide can be a bit jumpy at the start or the finish.

See this fiddle for a working example: http://jsfiddle.net/mikemjharris/ubptawr3/

There is a show class which adds the styling you need and the js is simplified to the following:

$('body').on('click','.click2',function(e){
  e.preventDefault();
  $('.changeable').toggleClass('show')    
});

Upvotes: 0

besciualex
besciualex

Reputation: 1892

I updated your code. Please check it here: JSFiddle

$('body').on('click','.click2',function(e){
    e.preventDefault();
    if($('.changeable').is(':hidden')){
            $('.changeable div').css('display','none');
            $('.changeable').css('display','table-row').find('div').slideDown(1000);
    }
    else{
        $('.changeable div').slideUp(1000, function(){$('.changeable').hide()});         
    }

Upvotes: 1

Related Questions