Collapse table in input form

JavaScript
1

Hi,

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.

Kent

2

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"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<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}
 
</style>
<script type="text/javascript">
 
function showHideMore(link_id,elemId) {
    var linkObj = document.getElementById(link_id);
    var contObj = document.getElementById(elemId);
    var status = (contObj.style.display == 'block')? 'none' : 'block';
    //show or hide the more content for this elemId
    contObj.style.display=status;
    //change the link innerHTML
    linkObj.innerHTML = (status == 'block')? 'Show less' : 'Show more';
}
</script>
 
</head>
<body>
<div>
    <ul>
        <li>
           <div>
               <a id="m1_link" href="#" onclick="showHideMore(this.id,'m1_cont'); return false;">Show more</a>
               <div id="m1_cont" class="more_content">More 1 content</div>
           </div>
        </li>
        <li>
           <div>
               <a id="m2_link"  href="#" onclick="showHideMore(this.id,'m2_cont'); return false">Show more</a>
               <div id="m2_cont" class="more_content">More 2 content</div>
           </div>
        </li>
        <li>
           <div>
               <a id="m3_link"  href="#" onclick="showHideMore(this.id,'m3_cont'); return false;">Show more</a>
               <div id="m3_cont" class="more_content">More 3 content</div>
           </div>
        </li>
        <li>
            <div>
               <a id="m4_link"  href="#" onclick="showHideMore(this.id,'m4_cont'); return false;">Show more</a>
               <div id="m4_cont" class="more_content">More 4 content</div>
           </div>
        </li>
    </ul>
</div>
 
</body>
</html>