Jquery Slidetoggle Effect Problem

[jimfog]

I am trying to achieve the slidetoggle effect found here http://www.w3schools...ry_slide_toggle here is the js code:

<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script><script type="text/javascript">$(document).ready(function(){$(".time").click(function(){	 $("#phone,.name").slideToggle("slow");  });});</script>

and here is the html:

<form action="Proccess.php" method="post">	    <table border="0">	    <tr class="name"style="display:none;">	    <td> name</td>	    <td><input type="text" name="name" maxlength="45" size="35" /></td>	    </tr>	    <tr id="phone"  style="display:none;">	    <td>Phone</td>	    <td><input type="text" name="phone" maxlength="45" size="35" /></td>	    </tr>		 <tr>		 <tr class="time">	    <td>Time</td>	    <td><input type="text" name="time" maxlength="45" size="35" /></td>	    </tr>		 <tr>	   	    <td><input class="submit" type="submit"  value=submit" maxlength="25" size="15" /></td>	    </tr>	    </table>	    </form>'	    ?>

The problem is that the sliding of the phone and name field, upon clicking the time field(as indicated by the js code) is NOT as gradual as i wanted, How gradual i want it? Look at the example here http://www.w3schools...ry_slide_toggle The animation is rather abrupt, the appearance of the name and phone fields. What might be the cause of that do you think?

[thescientist]

the example has the hidden content in a container, (panel) and animates that. as opposed to two sperate elements. Perhaps mimic more closely the convention of the example.

[jimfog]

I tried to do what you are suggesting by placing the 2 table rows in a div. Nonetheless, it seems this is something that cannot be done. Can table elements be placed in a div. In dreamweaver, when attempting to do the above the whole table element was placed in the div. Am i doing something wrong?

[thescientist]

what does your code look like now? Did you make the necessary selector adjustment in the JS?

[jimfog]

This is the new html:

<form action="Proccess.php" method="post">	    <table border="0">	   <div id="whole">  <tr style="display:none;">	    <td >Name</td>	    <td><input type="text" name="name" maxlength="45" size="35" /></td>	    </tr>	    <tr style="display:none;">	    <td>Phone</td>	    <td><input type="text" name="phone" maxlength="45" size="35" /></td>	    </tr>   </div>		 <tr>   <tr class="time">	    <td>Time</td>	    <td><input type="text" name="time" maxlength="45" size="35" /></td>	    </tr>		 <tr>	   	    <td><input class="submit" type="submit"  value="submit" maxlength="25" size="15" /></td>	    </tr>	    </table>	    </form>

js code:

<script  type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" ></script><script type="text/javascript">$(document).ready(function(){$(".time").click(function(){  $("#whole").slideToggle("slow");  });});</script>

Now, it does not work at all. As you see i have placed 2 table rows in a div name #whole, as in the example mentioned above(panel). When looking the code in firebug, #whole is empty. What do you think?

[dsonesuk]

The problem here is the use of tables, you only can use html tags such as <div> for example within the cells<td> OR outside the table, placing a opening div tag in one cell and closing div tag in another is not valid, and won't work, this is what scientist meant by

mimic more closely the convention of the example

SO try using divs instead, or if you must use tables try

<div id="whole"><table border="0">  <tr>			<td >Name</td>			<td><input type="text" name="name" maxlength="45" size="35" /></td>			</tr>			<tr>			<td>Phone</td>			<td><input type="text" name="phone" maxlength="45" size="35" /></td>			</tr></table>   </div> 

css

 #whole {display:none;}

[jimfog]

Now it works as want it, a gradual sliding of the element, thanks you a lot. I have 1 more question though. From your answer i deduced that a form can be made solely from divs. meaning, no need for tr/ table elements Is my conclusion correct?

[justsomeguy]

You don't "need" a table for anything, the different elements are fundamentally just different types of containers. You can organize your form fields in any way you want to, the only requirement is that they are inside the form tags.

[dsonesuk]

Tables should be only used to show tabular data, and never for layout of the page, or layout for a form and its form inputs.

[jimfog]

Ok, thanks for the advice. I now have another problem but i am going to make a different post for it.