CODEWITHSUNDEEP
jqueryhtmlcss
Michael Rader
Michael Rader

Reputation: 5957

Trying to get table to appear slowly with jQuery

I have a table nested inside of a another tables <td>. When a user clicks on that <td>'s <h3> element I want the nested table to slide down and appear slowly using jQuery. I have it basically working but I'm having an issue with the appearing table. It just appears and doesn't drop down like I'm asking jQuery to do. here is the project site:

Click on the bar that says, "Home Buyer Tips." This is the only item I have the jQuery tied to for now.

Drop down table

Here is the jQuery i am using:

$("h3#homeBuyerTips").click(function() {
    $("#hidden1").slideDown("slow");

Here is the CSS for the nested table:

#hidden1 {
    display: none;
}

And here is the HTML for just the item I am trying to show:

<tr>        
  <td colspan="3">
    <h3 id="homeBuyerTips">Home Buyer Tips</h3>
    <table id="hidden1">
      <thead>
        <th>Email</th>
        <th>Link</th>
        <th>Modified</th>
      </thead>
      <tr>
        <td rowspan="3">Home Buyer Tips</td>
        <td class="link" id="version11">
          <a href="http://www.crm-newsletter.com/client-to-client/homeBuyerTips/homeBuyerTip_email1.html" target="_blank">version 1</a>
        </td>
        <td class="date">02/05/2012</td>
      </tr>
      <tr>
        <td class="link" id="version12">
          <a href="http://www.crm-newsletter.com/client-to-client/homeBuyerTips/homeBuyerTip_email2.html" target="_blank">version 2</a>
        </td>
        <td class="date">02/05/2012</td>
      </tr>         
      <tr>
        <td class="link" id="version13">
          <a href="http://www.crm-newsletter.com/client-to-client/homeBuyerTips/homeBuyerTip_email3.html" target="_blank">version 3</a>
        </td>
        <td class="date">02/06/2012</td>
      </tr>
      <tr id="previewTitle"><td colspan="3">Preview</td></tr>
      <tr>
        <td id="previewWindow1" class="previewWindow" colspan="3" style="background: #FFF; height: 250px; width:780px;">
          <h2>Preview Window</h2>
        </td>
      </tr>
    </table>
  </td>
</tr>

Thank you so much in advance. Please let me know if I should post more of my code.

Upvotes: 2

Views: 200

Answers (2)

Vigrond
Vigrond

Reputation: 8198

Wrap your #hidden1 table in a div and call that #hidden1 instead. Table has display:table, not display:block, therefore it acts differently

Additionally, I'd use slideToggle() instead of slideDown() That way you can click it more than once to 'toggle' it up and down.

See example here: http://jsfiddle.net/QCua9/

Upvotes: 3

Didier Ghys
Didier Ghys

Reputation: 30666

I don't think jquery supports animating tables.

Slide TABLE element (as your markup - not working)

If you wrap the table #hidden1 inside a DIV element, the slidedown works as expected.

Wrapped in a DIV (working)

Upvotes: 3

Related Questions