How can I animate between display none and display table (or the visual equivalent thereof), in jQuery?

Question

I have been trying to learn a little bit about jQuery's .animate() function, and I have gotten a few things to animate, but I haven't been able to set up animation for my table in the way that I would like.

Here's the table html:

<div class="topSectionContainer">
    <div id="dropDownArrow">&#9658;</div><span class="editLabelTitle">Page Settings</span>
    <table class="topSectionTable">
        <tr>
            <td class="pageSettingsContainer"></td>
            <td class="fileBoxContainer">@Html.Raw(ContentGenerator.getFileBox("Tourism"))</td>
        </tr>
    </table>
</div>

I would like to get the following functionality:

The table.topSectionTable starts off as though it had display: none assigned.
When div#dropDownArrow is clicked it should (while animating) appear that the table is growing in height (whether the height property is actually adjusted or not) and revealing the contents of the table as it expands.
Once div#dropDownArrow is clicked again, it should animate in reverse, thus hiding the table and shrinking its height (or appearance thereof).

I have already used some simple code for this that does not have animation (jQuery):

$("#dropDownArrow").toggle(function () {
    $(".topSectionTable").css("display", "table");
    $("#dropDownArrow").html("&#9660;");
},
function () {
    $(".topSectionTable").css("display", "none");
    $("#dropDownArrow").html("&#9658;");
});

Things I have tried:

Using jQuery's .animate() with the display property. I am not sure of the reason for failure here, as the actual change in the display property doesn't show, but I'm guessing that changes to the display property are not supported with jQuery's .animate().
I have also tried setting the CSS rules for table.topSectionTable to reflect both overflow: hidden; and height: 0px;, then animating only the height property. Here, the animation on height was successful, however, the contents of td.fileBoxContainer show up whether the height is 0 or not (even though the height expands and contracts on the clickings of the div#dropDownArrow element.

I've seen this done all the time on websites, so I know there is a way. Furthermore, I would like to do this in jQuery rather than just CSS3 because I would like to retain this functionality in IE8, as well, if possible, and I know CSS3 has no chance of doing this.

UPDATE -- TRYING WITH HEIGHT 0 AND OVERFLOW HIDDEN, PLUS JQUERY ANIMATE

jQuery Code:

$("#dropDownArrow").toggle(function () {
    $(".topSectionTable").animate({
        height: 100}, 1000);
    $("#dropDownArrow").html("&#9660;");
},
function () {
    $(".topSectionTable").animate({
        height: 0}, 1000);
    $("#dropDownArrow").html("&#9658;");
});

CSS:

table.topSectionTable
{
    height: 0;
    overflow: hidden;
}

td.pageSettingsContainer
{

}

td.fileBoxContainer
{

}

And the HTML is the same as above

My C# getFileBox Method:

public static string getFileBox (string location)
{
    string content = "";
    string[] files = Directory.GetFiles(HttpContext.Current.Server.MapPath("~/CMS Files/" + location + "/"));

    foreach (var file in files)
    {
        content += Path.GetFileName(file);
        content += "<br/>";
    }

    return content;
}

possible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property) — cimmanon, Sep 30 '13 at 15:23
Are you positive whatever is spit out by `@Html.Raw(ContentGenerator.getFileBox("Tourism"))` isn't altering the style? `height: 0;overflow: hidden;` should work. — Snuffleupagus, Sep 30 '13 at 15:31
@Snuffleupagus Yeah, it acts as though this should work, however, there are no *style* changes being spit out by the c# method. All it is (for now) is a list of file names in a certain directory separated by your standard `
` elements. Even still, it doesn't start hidden (nor does it ever get hidden). — VoidKing, Sep 30 '13 at 16:26
@Snuffleupagus I am not sure I like the `slideUp/slideDown` way. It doesn't seem to smoothly animate. However, in regards to your advice, I have appended the exact code (and CSS) I have tried to get this method to work. If you don't mind looking it over and seeing what you think. — VoidKing, Sep 30 '13 at 16:37
@Snuffleupagus Here are the exact HTML contents of the `td.fileBoxContainer` element (this was obtained through Chrome's "Edit As HTML" option, then copying and pasting the entire element and its contents): `Native_Words_Native_Warriors_Exhibit.pdf
Tourism_MS_Building.jpg
` This was obtained before clicking on `div#dropDownArrow` however, the contents of this element is still visible, even at startup, and even though the table is shrunk to 0px — VoidKing, Sep 30 '13 at 16:48
@Snuffleupagus In case it is helpful I am appending to my question the C# method that fill the `td.fileBoxContainer` element. It is just test stuff for now, so it is very short. — VoidKing, Sep 30 '13 at 16:52

score 0 · Answer 1 · answered Sep 30 '13 at 15:25

0

Try slideUp() and slideDown(), examples here, and documentation here

answered Sep 30 '13 at 15:25

Yoggi

572
4
11

score 0 · Answer 2 · answered Sep 30 '13 at 15:29

0

yes as sayd up use:

$("#dropDownArrow").toggle(function () {
  $(".topSectionTable").slideDown();
  $("#dropDownArrow").html("&#9660;");
},
function () {
  $(".topSectionTable").slideUp();
  $("#dropDownArrow").html("&#9658;");
});

answered Sep 30 '13 at 15:29

Ciccio

468
4
17

Well, for much the same reason as in my code, I'm sure, the contents of the `td.fileBoxContainer` are visible on startup, however, even the slideDown/slideUp code doesn't seem to operate the way that it should. There must be something abnormal going on here. – VoidKing Sep 30 '13 at 16:28
That is, it doesn't smoothly animate. (Nevermind what I said about the contents starting off shown, I forgot to re-add `display: none;` for this example. – VoidKing Sep 30 '13 at 16:30

score 0 · Accepted Answer · edited May 23 '17 at 11:43

Ended Up Figuring This One Out:

Okay, so while this page was the suggested duplicate:

Transitions on the display: property

The real duplicate (considering the problem at hand, but especially the answer) should be this:

overflow:hidden not working when using tables

The short answer to my problem was this:

"Overflow only works on block level elements. Table elements aren't block elements."

Thus my solution was to simply wrap my table in another div and apply overflow: hidden; and the height to it, and then target it with the jQuery's .animate() instead of the table.

As for why slideUp() and slideDown() didn't work, I can only speculate that when jQuery implements these functions, it uses some (if not all) of the same features that apparently breaks on non-block level elements.

How can I animate between display none and display table (or the visual equivalent thereof), in jQuery?

3 Answers3