Databases
StackOverflow2013
Postsdbo
POHow can I animate between display none and display table (or the visual equivalent thereof), in jQuery?
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I animate between display none and display table (or the visual equivalent thereof), in jQuery?
    primarykey
    data
    text
    <p>I have been trying to learn a little bit about jQuery's <code>.animate()</code> 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.</p> <p>Here's the table html:</p> <pre><code>&lt;div class="topSectionContainer"&gt; &lt;div id="dropDownArrow"&gt;&amp;#9658;&lt;/div&gt;&lt;span class="editLabelTitle"&gt;Page Settings&lt;/span&gt; &lt;table class="topSectionTable"&gt; &lt;tr&gt; &lt;td class="pageSettingsContainer"&gt;&lt;/td&gt; &lt;td class="fileBoxContainer"&gt;@Html.Raw(ContentGenerator.getFileBox("Tourism"))&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;/div&gt; </code></pre> <p>I would like to get the following functionality:</p> <ol> <li>The <code>table.topSectionTable</code> starts off as though it had <code>display: none</code> assigned.</li> <li>When <code>div#dropDownArrow</code> 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.</li> <li>Once <code>div#dropDownArrow</code> is clicked again, it should animate in reverse, thus hiding the table and shrinking its height (or appearance thereof).</li> </ol> <p>I have already used some simple code for this that does not have animation (jQuery):</p> <pre><code>$("#dropDownArrow").toggle(function () { $(".topSectionTable").css("display", "table"); $("#dropDownArrow").html("&amp;#9660;"); }, function () { $(".topSectionTable").css("display", "none"); $("#dropDownArrow").html("&amp;#9658;"); }); </code></pre> <p><strong>Things I have tried:</strong></p> <ul> <li>Using jQuery's <code>.animate()</code> with the display property. <em>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 <code>display</code> property are not supported with jQuery's <code>.animate()</code></em>.</li> <li>I have also tried setting the CSS rules for <code>table.topSectionTable</code> to reflect both <code>overflow: hidden;</code> and <code>height: 0px;</code>, then animating only the height property. <em>Here, the animation on height was successful, however, the contents of <code>td.fileBoxContainer</code> show up whether the height is 0 or not (even though the height expands and contracts on the clickings of the <code>div#dropDownArrow</code> element.</em></li> </ul> <p>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.</p> <p><strong>UPDATE -- TRYING WITH HEIGHT 0 AND OVERFLOW HIDDEN, PLUS JQUERY ANIMATE</strong></p> <p><em>jQuery Code:</em></p> <pre><code>$("#dropDownArrow").toggle(function () { $(".topSectionTable").animate({ height: 100}, 1000); $("#dropDownArrow").html("&amp;#9660;"); }, function () { $(".topSectionTable").animate({ height: 0}, 1000); $("#dropDownArrow").html("&amp;#9658;"); }); </code></pre> <p><em>CSS:</em></p> <pre><code>table.topSectionTable { height: 0; overflow: hidden; } td.pageSettingsContainer { } td.fileBoxContainer { } </code></pre> <p><em>And the HTML is the same as above</em></p> <p><strong>My C# getFileBox Method:</strong></p> <pre><code>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 += "&lt;br/&gt;"; } return content; } </code></pre>
    singulars
    1. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. PTQuestion
    1. USVoidKing
    1. USVoidKing
    plurals
    1. PL
      singulars
      1. LTLinked
    2. PL
      singulars
      1. LTLinked
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    2. PO
      singulars
      1. PTAnswer
    3. PO
      singulars
      1. PTAnswer
    1. This table or related slice is empty.
    1. COpossible duplicate of [Transitions on the display: property](http://stackoverflow.com/questions/3331353/transitions-on-the-display-property)
      singulars
      1. POHow can I animate between display none and display table (or the visual equivalent thereof), in jQuery?
      1. UScimmanon
    2. COAre you positive whatever is spit out by `@Html.Raw(ContentGenerator.getFileBox("Tourism"))` isn't altering the style? `height: 0;overflow: hidden;` should work.
      singulars
      1. POHow can I animate between display none and display table (or the visual equivalent thereof), in jQuery?
      1. USSnuffleupagus
    3. CO@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 `<br/>` elements. Even still, it doesn't start hidden (nor does it ever get hidden).
      singulars
      1. POHow can I animate between display none and display table (or the visual equivalent thereof), in jQuery?
      1. USVoidKing
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload