basic help needed to hiding and showing div

[mt]

In a nutshell, I'd like to have a list of items, each of which fills out a
small table which displays some info about a particular item(the items being
a trouble ticket for a tech support ASP-built web-based app). There may be
zero, one, or many of these per ticket. Since some tickets have many of
these items (call them work items), the page can get awful long. I have this
part working already.

So my proposed solution to make the pages shorter would be to have one line
for each of these little work items. If you click the text in that one line,
it shows what had been a hidden div. If you click it again, it hides it.

See below:

Current version:
<Main Table containing initial Ticket info>
<small table for work item #1, taking up 5 or so rows of space>
<small table for work item #2, taking up 5 or so rows of space>
<small table for work item #3, taking up 5 or so rows of space>
<small table for work item #4, taking up 5 or so rows of space>
<small table for work item #5, taking up 5 or so rows of space>

Proposed version:
<Main Table containing initial Ticket info>
<1 Line of text with brief description of item #1>
<hidden><small table for work item #1, taking up 5 or so rows of space>
<1 Line of text with brief description of item #2>
<hidden><small table for work item #2, taking up 5 or so rows of space>
<1 Line of text with brief description of item #3>
<hidden><small table for work item #3, taking up 5 or so rows of space>
<1 Line of text with brief description of item #4>
<hidden><small table for work item #4, taking up 5 or so rows of space>
<1 Line of text with brief description of item #5>
<hidden><small table for work item #5, taking up 5 or so rows of space>


Additionally, I'd like to come up with an "Expand all" and Contract all"
link or button for the whole page.

My thinking is that the way to do it would be to have a simple javascript
function which would change the styles from display:none to display:block,
and call that function with an OnClick event on that text. I guess I'm not
sure how to code that, and that's the help I'm asking for.

 

[McKirahan]

In a nutshell, I'd like to have a list of items, each of which fills out a
small table which displays some info about a particular item(the items being
a trouble ticket for a tech support ASP-built web-based app). There may be
zero, one, or many of these per ticket. Since some tickets have many of
these items (call them work items), the page can get awful long. I have this
part working already.

So my proposed solution to make the pages shorter would be to have one line
for each of these little work items. If you click the text in that one line,
it shows what had been a hidden div. If you click it again, it hides it.

See below:

Current version:
<Main Table containing initial Ticket info>
<small table for work item #1, taking up 5 or so rows of space>
<small table for work item #2, taking up 5 or so rows of space>
<small table for work item #3, taking up 5 or so rows of space>
<small table for work item #4, taking up 5 or so rows of space>
<small table for work item #5, taking up 5 or so rows of space>

Proposed version:
<Main Table containing initial Ticket info>
<1 Line of text with brief description of item #1>
<hidden><small table for work item #1, taking up 5 or so rows of space>
<1 Line of text with brief description of item #2>
<hidden><small table for work item #2, taking up 5 or so rows of space>
<1 Line of text with brief description of item #3>
<hidden><small table for work item #3, taking up 5 or so rows of space>
<1 Line of text with brief description of item #4>
<hidden><small table for work item #4, taking up 5 or so rows of space>
<1 Line of text with brief description of item #5>
<hidden><small table for work item #5, taking up 5 or so rows of space>


Additionally, I'd like to come up with an "Expand all" and Contract all"
link or button for the whole page.

My thinking is that the way to do it would be to have a simple javascript
function which would change the styles from display:none to display:block,
and call that function with an OnClick event on that text. I guess I'm not
sure how to code that, and that's the help I'm asking for.

Something like the following? Watch for word-wrap.

<html>
<head>
<title>showhide.htm</title>
<script type="text/javascript">
function showhide(what) {
if (what == "") {
var disp = document.getElementById("Disp").value;
disp == "Show" ? disp = "Hide" : disp = "Show";
disp == "Show" ? stat = "none" : stat = "block";
var divs = document.getElementsByTagName("div");
var divx;
for (var i=0; i<divs.length; i++) {
divx = divs.id;
document.getElementById(divx).style.display = stat;
}
document.getElementById("Disp").value = disp;
} else {
var stat = document.getElementById(what).style.display;
if (stat == "none") {
document.getElementById(what).style.display = "block";
} else {
document.getElementById(what).style.display = "none";
}
}
}
</script>
</head>
<body>
<table border="0" width="400" style="border:solid 1px black">
<tr>
<th width="50">Ticket<hr></th>
<th width="350">Problem Description<hr></th>
</tr>
<tr valign="top">
<td align="center">
<a href="#" onclick="showhide('Tix1')">#1</a>
</td>
<td>
Broken Pipe
<div id="Tix1" style="display:none">
blah, blah, blah, blah, blah, blah.
</div>
</td>
</tr>
<tr valign="top">
<td align="center">
<a href="#" onclick="showhide('Tix2')">#2</a>
</td>
<td>
Broken Window
<div id="Tix2" style="display:none">
blah, blah, blah, blah, blah, blah.
</div>
</td>
</tr>
</table>
<br>
<input type="button" name="Disp" value="Show" onclick="showhide('')">
</body>
</html>

 

[Fred Oz]

Here is another version of McK's effort. The differences are that
doesn't hide the divs with in-line styles to begin with, so if the user
has JS turned off, they will still see the page content.

I've also added show all and hide all functions, which could be one
function called with an argument of "none" or "all" perhaps.

I've isolated the ticket divs from others in the page by putting them
inside a div id="tickets", then pass this to the hideAll & showAll
functions. It limits their scope so they don't hide all the child divs
in the page.

Of course you can have lots of fun with styles, etc. and use tables to
do layout, but divs and CSS may be simpler.

Have fun!

<html>
<head>
<title>showhide 2</title>

<style type="text/css">
..head
{font-family: arial, sans-serif;
font-size: 14;
padding: 10 0 0 5
}
..items
{padding: 0 0 0 10;
border-bottom: 1 solid #003366;
border-left: 2 solid #003366;
}
..item
{font-size: 12;
margin: 0 0 0 0
}
</style>

<script type="text/javascript">

function showHide2(a) {
var b = a.parentNode.getElementsByTagName('div');
for (var i=0; i<b.length; ++i) {
if (b.style.display == 'none') {
b.style.display = '';
} else {
b.style.display = 'none';
}
}
}

function hideAll2(x) {
var c = x.getElementsByTagName('div');
for (var j=0; j<c.length; ++j) {
var d = c[j].getElementsByTagName('div');
for (var k=0; k<d.length; ++k) {
d[k].style.display = 'none';
// alert(d[k].style);
}
}
}
function showAll2(x) {
var c = x.getElementsByTagName('div');
for (var j=0; j<c.length; ++j) {
var d = c[j].getElementsByTagName('div');
for (var k=0; k<d.length; ++k) {
d[k].style.display = '';
}
}
}

</script>
</head>
<body onload="hideAll2(document.getElementById('tickets'))">

<br><br>
<form action="">
<input type="button" value="Show all 2"
onclick="showAll2(document.getElementById('tickets'));">
<input type="button" value="Hide all 2"
onclick="hideAll2(document.getElementById('tickets'));">
</form>

<div id="tickets">
<div class="head"><a href="#" onclick="showHide2(this);">Broken Pipe</a>
<div class="items">
<p class="item">Attend site to stop leakage</p>
<p class="item">Harry's Hardware at (some address) has
replacement parts</p>
<p class="item">Fix ASAP - charge to charge code 7</p>
</ol>
</div>
</div>
<div class="head"><a href="#" onclick="showHide2(this);">Repair window</a>
<div class="items">
<p class="item">Glazier on site, needs immediate assistance</p>
<p class="item">Ensures WHS standards observed - sharp glass</p>
<p class="item">Have fun</p>
</div>
</div>
<div class="head"><a href="#" onclick="showHide2(this);">Wife's birthday</a>
<div class="items">
<p class="item">Don't forget</p>
<p class="item">Jewelry is nice, diamonds preferred</p>
<p class="item">Flowers to her work (BIG bunch), with soppy card</p>
<p class="item">Dinner, then whatever...</p>
</div>
</div>
</div>


</body>
</html>

 

[mt]

Thanks! I'll try it out!

 

[mt]

Thanks! I will see what I can do with this.

 

[Michael Winter]

var divs = document.getElementsByTagName("div");
var divx;
for (var i=0; i<divs.length; i++) {
divx = divs.id;
document.getElementById(divx).style.display = stat;

As you already have the element reference, why find the id and obtain that
reference all over again?

[snip]

<div id="Tix1" style="display:none">
[snip]

<div id="Tix2" style="display:none">

Considering that the OP is working on a technical support page, that
doesn't seem to be a particularly sensible idea. A page should be usable
without scripting, but enhanced by its presence. It should not be the
other way around.

[snip]

Mike