www.webdeveloper.com
Results 1 to 5 of 5

Thread: Expand/Collapse

  1. #1
    Join Date
    Apr 2012
    Posts
    3

    Expand/Collapse

    Hi,
    I am using Expand/Collapse functionality for the table. By default it is expandable. I want to do it is by default Collapsed. Below is the code for it. Please help me in this.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    table {
    border: 1px solid black;
    }
    table td {
    margin: 5px;
    padding: 5px;
    border: 1px dotted black;
    }

    thead.collapse td {
    padding-left: 20px;
    background: transparent url('iconCollapse.gif') no-repeat 5px center;
    }
    thead.expand td {
    padding-left: 20px;
    background: transparent url('iconExpand.gif') no-repeat 5px center;
    }

    .hidden {display: none;}
    </style>

    <script>
    <!--
    function expandCollapse() {
    // Get the parent table
    var table = this.parentNode;
    if(table.tagName.match(/^table$/i)) { // Check it is indeed a table
    // Go through each row, hiding it or showing it...
    var tableBody = table.getElementsByTagName('tbody')[0];
    var bodyRows = tableBody.getElementsByTagName('tr');
    for(var rowsI = 0; rowsI < bodyRows.length; rowsI++) {
    if(this.className == 'collapse') bodyRows[rowsI].className = 'hidden';
    else if(this.className == 'expand') bodyRows[rowsI].className = '';
    }

    // change our class
    if(this.className == 'collapse') this.className = 'expand';
    else if(this.className == 'expand') this.className = 'collapse';
    }
    }

    function collapsibleTables() {
    // Find all the tables in the document
    var allTables = document.getElementsByTagName('table');
    // go through each table
    for(var tablesI = 0; tablesI < allTables.length; tablesI++) {
    // Find the head section
    var head = allTables[tablesI].getElementsByTagName('thead')[0];
    if(head) {
    // Change it's class, and give it an onclick
    head.className = "collapse";
    head.onclick = expandCollapse;
    }
    }
    }

    window.onload = function() {
    // All the things to do when the window loads
    collapsibleTables();
    }
    -->
    </script>
    </head>

    <body>
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
    <tr><td>Results of an experiment</td></tr>
    </thead>
    <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr>
    <td>
    <table>
    <thead><tr><td>result 4 has several branches</td></tr></thead>
    <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>2</td></tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr>
    <td>
    <table>
    <thead><tr><td>result 7 has several branches</td></tr></thead>
    <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>2</td></tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>


    Advance Thanks

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,668
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Untitled Document</title>
    <style>
    table {
    border: 1px solid black;
    }
    table td {
    margin: 5px;
    padding: 5px;
    border: 1px dotted black;
    }
    
    thead.collapse td {
    padding-left: 20px;
    background: transparent url('iconCollapse.gif') no-repeat 5px center;
    }
    thead.expand td {
    padding-left: 20px;
    background: transparent url('iconExpand.gif') no-repeat 5px center;
    }
    
    .hidden {display: none;}
    </style>
    
    <script>
    <!--
    function expandCollapse(obj) {
     // Go through each row, hiding it or showing it...
     var tableBody = obj.nextSibling;
     var bodyRows = tableBody.getElementsByTagName('tr');
     for(var rowsI = 0; rowsI < bodyRows.length; rowsI++) {
      if (bodyRows[rowsI].parentNode==tableBody){
       if(obj.className == 'collapse'){
        bodyRows[rowsI].className = 'hidden';
       }
       else if(obj.className == 'expand'){
        bodyRows[rowsI].className = '';
       }
      }
     }
    
    // change our class
     obj.className = obj.className == 'collapse'?'expand':'collapse';
    }
    
    function collapsibleTables(id) {
     var allTables = document.getElementById(id);
     var hdrs=allTables.getElementsByTagName('THEAD');
     for(var z0 = 0; z0 < hdrs.length; z0++) {
    // Change it's class, and give it an onclick
      hdrs[z0].className = "collapse";
      expandCollapse(hdrs[z0]);
      hdrs[z0].onclick = function(){ expandCollapse(this); }
     }
    }
    
    window.onload = function() {
    // All the things to do when the window loads
    collapsibleTables('tst');
    }
    -->
    </script>
    </head>
    
    <body>
    <table id="tst" width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead><tr><td>Results of an experiment</td></tr></thead>
    <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>3</td></tr>
    <tr>
    <td>
    <table>
    <thead><tr><td>result 4 has several branches</td></tr></thead>
    <tbody>
    <tr><td>1</td></tr>
    <tr><td>2</td></tr>
    <tr><td>2</td></tr>
    </tbody>
    </table>
    </td>
    </tr>
    <tr><td>5</td></tr>
    <tr><td>6</td></tr>
    <tr>
    <td>
    <table>
    <thead><tr><td>result 7 has several branches</td></tr></thead>
    <tbody>
    <tr><td>11</td></tr>
    <tr><td>2</td></tr>
    <tr><td>2</td></tr>
    </tbody>
    </table>
    </td>
    </tr>
    </tbody>
    </table>
    </body>
    </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Apr 2012
    Posts
    3

    Expand/Collapse How To make hide all the tbody in onload function

    Hi Philips, Thanks for your reply....I have tried with that code. It did not work for me..... By default it should be hidden in onload function. When I click + button then it should expand all the rows....

  4. #4
    Join Date
    Mar 2012
    Posts
    3
    how to create a new thread????????????????

  5. #5
    Join Date
    Nov 2011
    Location
    Dallas, TX
    Posts
    323
    Looks like you figured it out here: http://www.webdeveloper.com/forum/sh...d.php?t=260600

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles