SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member
    Join Date
    Mar 2007
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Collapse table in input form

    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
    Attached Images Attached Images

  2. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This demo should give you a pretty good idea on one option on how to do it.

    Code:
     
    <!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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •