Collapse table in input form


I am a newbie in javascript…I am just wondering how to do the collapse table in the input field inside the form. Can anyone give me some idea? Thanks in advance.


This demo should give you a pretty good idea on one option on how to do it.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
<html xmlns="">
<style type="text/css">
ul {
list-style-type: none}
.more_content {
margin: 10px 0px 0px 50px;
padding: 5px 5px 5px 5px;
width: 200px;
height: 100px;
border: 1px solid black;
overflow: auto;
display: none}
<script type="text/javascript">
function showHideMore(link_id,elemId) {
    var linkObj = document.getElementById(link_id);
    var contObj = document.getElementById(elemId);
    var status = ( == 'block')? 'none' : 'block';
    //show or hide the more content for this elemId;
    //change the link innerHTML
    linkObj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
               <a id="m1_link" href="#" onclick="showHideMore(,'m1_cont'); return false;">Show more</a>
               <div id="m1_cont" class="more_content">More 1 content</div>
               <a id="m2_link"  href="#" onclick="showHideMore(,'m2_cont'); return false">Show more</a>
               <div id="m2_cont" class="more_content">More 2 content</div>
               <a id="m3_link"  href="#" onclick="showHideMore(,'m3_cont'); return false;">Show more</a>
               <div id="m3_cont" class="more_content">More 3 content</div>
               <a id="m4_link"  href="#" onclick="showHideMore(,'m4_cont'); return false;">Show more</a>
               <div id="m4_cont" class="more_content">More 4 content</div>