Adding in basic collapse/expand all

**dansdill84** · 01-28-2011 05:19 PM

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

**Tcobb** · 01-28-2011 10:45 PM

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>

**tirna** · 01-29-2011 12:01 AM

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>

**ilsaggio** · 11-12-2011 09:54 AM

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: Adding in basic collapse/expand all

Thread Tools

Display

Adding in basic collapse/expand all

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions