?
Solved

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

Posted on 2003-03-17
6
Medium Priority
?
141 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 
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

Industry Leaders: 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

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
Suggested Courses

764 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