Why is this jQuery not sliding down/showing hidden

Question

I create rows with IDs of foapalrow3 and foapalrow4 in C#, making them temporarily invisible:

foapalrow3 = new HtmlTableRow();
foapalrow3.ID = "foapalrow3";
. . .
foapalrow3.Visible = false;

foapalrow4 = new HtmlTableRow();
foapalrow4.ID = "foapalrow4";
. . .
foapalHTMLTable.Rows.Add(foapalrow4);
foapalrow4.Visible = false;

I then have jQuery to condtionally make this visible again:

$(document).on("click", '[id$=btnAddFoapalRow]', function (e) {
    if ($('[id$=foapalrow3]').css('display') == 'none') {
        $('[id$=foapalrow3]').slideDown();
    } else if ($('[id$ = foapalrow4]').css('display') == 'none') {
        $('[id$=foapalrow4]').slideDown();
    }
});

...but it doesn't work - the rows are still not shown. Is it that "visible == false" in C# does not match "display == none" in jQuery, or what?

Answer 1

You could check for the display property using

$('[id$=foapalrow4]').is(":visible");