www.webdeveloper.com
Results 1 to 4 of 4

Thread: Adding in basic collapse/expand all

  1. #1
    Join Date
    Jan 2011
    Posts
    1

    Question Adding in basic collapse/expand all

    I found a decent way to include a toggle feature for displaying detail rows underneath "parent" rows in a regular old HTML table displaying heaps of data: http://www.javascripttoolbox.com/jquery/#expandablerows

    See "Expandable "Detail" Table Rows" rows section.

    Would anyone know what it would take to add an "expand all/collapse all" link that would toggle all child rows open/hidden?

    If so, how difficult would it be to have multiple tables with this functionality on the same html page?

    Sorry, I'm fairly new to javascript in the whole so any and all basic help is appreciated!!!

  2. #2
    Join Date
    Mar 2009
    Posts
    430
    You can try something like this---its a simple example of how to make a row on a table go away or appear. If you want the table itself to go away just give the table an id and apply the same principle. If you want multiple things to appear and reappear adapt the functions to use arrays of HTML id's.
    Code:
    <html>
    	<head>
    
    		<title>Untitled Document</title>
    <script type="text/javascript">
    function hideBBB(){
      var x = document.getElementById("bbb");
      x.style.display = "none";
    }
    function showAll(){
       var x = document.getElementById('bbb');
       x.style.display ='';
    }
       
    </script>
    	
    	</head>
    	<body>
    <table>
    <tr><td>aaa</td><td>aaa</td></tr>
    <tr id ="bbb"><td>bbb</td><td>bbb</td></tr>
    <tr><td>ccc</td><td>ccc</td></tr>
    </table>
    <input type = "button" value="hide bbb row" onclick = "hideBBB()" />
    <br />
    <input type = "button" value="show bbb row" onclick = "showAll()" />
    	</body>
    </html>

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    Do you have to use tables? If not:

    HTML 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';
        //display/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>

  4. #4
    Join Date
    Nov 2011
    Posts
    1
    hi, the code is ok, but for hidden for default a td??
    Code:
    </head>
    <style> 
    body { margin: 0px; background-color: #2F3A3C  }
    	#testContent { height:1px; }
    	#navigator { font-size:12px; text-align:center; color:#3D9898; }
    	#navigator a { display: inline-block; text-transform: uppercase; text-decoration:none; color:#3D9898; }
    	#navigator a:hover { text-decoration:underline; }
    	html, body { margin: 0; padding: 0; width: 100%; height: 100%; }
        iframe {margin: 0; padding:0; border: 0;}
    		
    	
    </style>
    <script type="text/javascript"> 
    function hideBBB(){
    var x = document.getElementById("bbb");
    x.style.display = "none";
    }
    function showAll(){
    var x = document.getElementById('bbb');
    x.style.display ='';
    }
     
    </script>
     
     
    <body>
    <div center>
    <table width="100%" border="0" cellpadding="0"  cellspacing="0" bgcolor="2F3A3C">
      <tr>
        <td border="0"><iframe src="http://www.google.it" name="mainFrame" id="mainFrame" height="610px" width="100%" scrolling="no" frameborder="0" > </iframe></td>
     <!--  <td id ="bbb" height="610px" width="250" border="0" bgcolor="2F3A3C"><iframe src="http://www.google.it" height="605px" width="250" scrolling="yes" frameborder="0"> </iframe></td> -->
      </tr>
    </table>
    <div id="navigator">
      <p> 
    <a href="#" onclick = "showAll()">Mostra</a> / <a href="#" onclick = "hideBBB()">Nascondi</a> CHAT</font></p>
       
    </div>
     
    </div>
    </body>
    </html>

Thread Information

Users Browsing this Thread

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

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