Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>EDIT: I see you've updated your question to make your intent clearer. I think the best way to achieve what you want is to group the form fields in one element, and toggle that element.</p> <p>I think this is preferable to animating multiple table rows simultaneously, since I assume your goal is to animate all the associated fields at once, in a single animation.</p> <p>Here's how you might do that:</p> <pre><code>&lt;h2 class="clicke"&gt;CLICK ME #1&lt;/h2&gt; &lt;table&gt; &lt;tr class="tbl_even"&gt; &lt;td class="required"&gt;Name (First, Middle Initial, Last)&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="realname" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="tbl_odd"&gt; &lt;td&gt;Birth Date&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="Birth Date" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt; &lt;h2 class="clicke"&gt;CLICK ME #2&lt;/h2&gt; &lt;table&gt; &lt;tr class="tbl_odd"&gt; &lt;td&gt;Present Address&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="Present Address" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;tr class="tbl_even"&gt; &lt;td class="required"&gt;City&lt;/td&gt; &lt;td&gt;&lt;input type="text" name="City" /&gt;&lt;/td&gt; &lt;/tr&gt; &lt;/table&gt;​​​ </code></pre> <p>jQuery:</p> <pre><code>$(document).ready(function(){ $('.clicke').next('table').hide(); $('.clicke').click(function(){ $(this).next('table').slideToggle('slow'); }); });​ </code></pre> <p>Here is a demo: <a href="http://jsfiddle.net/ZvFQm/1/" rel="nofollow">http://jsfiddle.net/ZvFQm/1/</a></p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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