Toggle Additional Information

Add this snippet to your forms when you need additional information but don't want to display the input boxes unless it is necessary. Easy to implement and expand.

We have tested the code in IE 8.0, Firefox3.5.2, Opera 10.0.0, Netscape 9.0.0.6, Flock2.51 and Safari Public Beta 4(528.16). This script worked well in all platforms with no variations observed.

For your Information: Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms, tables and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy, two (2) part copy and paste code that goes in both the <HEAD> section (No reconfigurations) and then you need to incorporate the <BODY> section into a fully functional form. See below where and howto you can reconfigure the <BODY> section of code to fit your form.

<table>
<tr>
<td>College name:</td>
<td style="text-align: right;"><input name="name" type="text"></td>
</tr><tr>
<td>Years Attended:</td>
<td style="text-align: right;"><input name="bday" type="text"></td>
</tr><tr>
<td>Degree:</td>
<td style="text-align: right;"><input name="bplace" type="text"></td>
</tr>
</table>

As you can notice in the <table> </table> to the left where you can reconfigure your options within the form.

If you want to add more options into the form, then all you need to do is follow the table format for any additions.

College name:
Years Attended:
Degree:
ROTC Y/N:

Just add the below section of code before the closing </table> tag to make any additions to the form.

</tr><tr>
<td>ROTC Y/N:</td>
<td style="text-align: right;"><input name="military" type="text"></td>
</tr><tr>

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ] [ Rate This Page ] [ Scripts In Conflict ]