Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

How to use divisions or some other technique to create a "drilldown" effect

Posted on 2003-03-17
6
Medium Priority
?
144 Views
Last Modified: 2010-04-09
I have an application that creates an Excel style display (basically a spreadsheet) and I have a need to be able to normally "hide" the detail but if a header is clicked, then display the detail below it.

For example I may have data and a display like this:

AAA
BBB
CCC
DDD

When I click BBB, I want BBB to expand and the display to look like this:

AAA
BBB
  111
  222
  333
CCC
DDD


This data was all originally stored in a single table and I could not get the expand/collapse to work.  Later I tried making each row it's own table and using division to hide/unhide them.  This worked sortof but when I hide a division, instead of the rest of the page collapsing, instead that section just went blank.  Any ideas to how make this work
0
Comment
Question by:mskvarenina
  • 3
  • 2
6 Comments
 
LVL 1

Expert Comment

by:Victor_R
ID: 8151893
I think you need absolutely positioned <div> tags. Then you can just keep replacing the same area with new <div>s.
0
 
LVL 17

Expert Comment

by:dorward
ID: 8151982
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>
<style type="text/css">
td { border: solid black 1px; cursor: pointer; }
</style>
<script type="text/javascript">
function flip(e) {
    if (document.getElementById(e).style.display == 'none') {
        document.getElementById(e).style.display = 'block';
    } else {
        document.getElementById(e).style.display = 'none';
    }
}

function hideall() {
     for (i=0;i<document.getElementsByTagName("div").length; i++) {
          if (document.getElementsByTagName("div").item(i).className == "extra"){
               document.getElementsByTagName("div").item(i).style.display = "none";
          }
     }

}

window.onload = function(){
    hideall();
};

</script>
</head>
<body>

<table>
<tbody>
<tr><td onclick="flip('aaa')">AAA</span><div class="extra" id="aaa">111<br>222<br>333</div></td></tr>
<tr><td onclick="flip('bbb')">BBB</span><div class="extra" id="bbb">111<br>222<br>333</div></td></tr>
<tr><td onclick="flip('ccc')">CCC</span><div class="extra" id="ccc">111<br>222<br>333</div></td></tr>
<tr><td onclick="flip('ddd')">DDD</span><div class="extra" id="ddd">111<br>222<br>333</div></td></tr>

</body></html>
0
 

Author Comment

by:mskvarenina
ID: 8152568
dorward,  Wow!  Thanks for the quick response.  Your sample works but I have a slightly more complicated situation and I'm not sure how or if I can adopt your sample to my needs.

I have row that I want to expand to other rows in the same table.  In other words I have a <TR> followed by a bunch of <TD>s.  My row ends with a </TR> and I start up a new row(s) of detail (<TD>s)

So I need to be able to name the entire row (or rows) a particular ID so I can hide/display an entire set of rows.  
0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 17

Accepted Solution

by:
dorward earned 1000 total points
ID: 8152956
OK, I've slightly tweaked the CSS and JS, and did some heavy rewriting of the HTML. Gotta love that <tbody> element.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Test</title>

<style type="text/css">
tbody { border: solid black 1px; cursor: pointer; }
tbody.extra { cursor: auto; }
</style>
<script type="text/javascript">

var hiddenContentClass = "extra";
var hiddenContentElement = "tbody";

function flip(e) {
  if (document.getElementById(e).style.display == 'none') {
    document.getElementById(e).style.display = '';
  } else {
    document.getElementById(e).style.display = 'none';
  }
}

function hideall() {
  for (i=0;i<document.getElementsByTagName(hiddenContentElement).length;i++) {
    if(document.getElementsByTagName(hiddenContentElement).item(i).className == hiddenContentClass){
      document.getElementsByTagName(hiddenContentElement).item(i).style.display="none";
    }          
  }
}

window.onload = function() {
  hideall();
};

</script>
</head>
<body>
<table>
<tbody>
<tr onclick="flip('aaa')">
<td>AAA</td>
<td>123</td>
</tr>
</tbody>

<tbody class="extra" id="aaa">
<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>
</tbody>

<tbody>
<tr onclick="flip('bbb')">
<td>BBB</td>
<td>123</td>
</tr>
</tbody>

<tbody class="extra" id="bbb">
<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>
</tbody>

<tbody>
<tr onclick="flip('ccc')">
<td>CCC</td>
<td>123</td>
</tr>
</tbody>

<tbody class="extra" id="ccc">
<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>
</tbody>

<tbody>
<tr onclick="flip('ddd')">
<td>DDD</td>
<td>123</td>
</tr>
</tbody>

<tbody class="extra" id="ddd">
<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>

<tr>
<td>la la</td>
<td>la la</td>
</tr>
</tbody>
</table>
</body>
</html>
0
 

Author Comment

by:mskvarenina
ID: 8160185
Outstanding!  Thanks for the quick response and the working sample.  I was able to adapt your sample to my app and now it works as desired!
0
 
LVL 17

Expert Comment

by:dorward
ID: 8160431
Great, glad to have helped (I even learnt a little about JS which I didn't know before in the process)
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
Suggested Courses

571 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question