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><smal l table for work item #1, taking up 5 or so rows of space>
<1 Line of text with brief description of item #2>
<hidden><smal l table for work item #2, taking up 5 or so rows of space>
<1 Line of text with brief description of item #3>
<hidden><smal l table for work item #3, taking up 5 or so rows of space>
<1 Line of text with brief description of item #4>
<hidden><smal l table for work item #4, taking up 5 or so rows of space>
<1 Line of text with brief description of item #5>
<hidden><smal l 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]

"mt" <mi********@HTO mail.com> wrote in message
news:le******** ************@co mcast.com...

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><smal l table for work item #1, taking up 5 or so rows of space>
<1 Line of text with brief description of item #2>
<hidden><smal l table for work item #2, taking up 5 or so rows of space>
<1 Line of text with brief description of item #3>
<hidden><smal l table for work item #3, taking up 5 or so rows of space>
<1 Line of text with brief description of item #4>
<hidden><smal l table for work item #4, taking up 5 or so rows of space>
<1 Line of text with brief description of item #5>
<hidden><smal l 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.getEle mentById("Disp" ).value;
disp == "Show" ? disp = "Hide" : disp = "Show";
disp == "Show" ? stat = "none" : stat = "block";
var divs = document.getEle mentsByTagName( "div");
var divx;
for (var i=0; i<divs.length; i++) {
divx = divs[i].id;
document.getEle mentById(divx). style.display = stat;
}
document.getEle mentById("Disp" ).value = disp;
} else {
var stat = document.getEle mentById(what). style.display;
if (stat == "none") {
document.getEle mentById(what). style.display = "block";
} else {
document.getEle mentById(what). style.display = "none";
}
}
}
</script>
</head>
<body>
<table border="0" width="400" style="border:s olid 1px black">
<tr>
<th width="50">Tick et<hr></th>
<th width="350">Pro blem Description<hr> </th>
</tr>
<tr valign="top">
<td align="center">
<a href="#" onclick="showhi de('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="showhi de('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="showhi de('')">
</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>showhi de 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.ge tElementsByTagN ame('div');
for (var i=0; i<b.length; ++i) {
if (b[i].style.display == 'none') {
b[i].style.display = '';
} else {
b[i].style.display = 'none';
}
}
}

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

</script>
</head>
<body onload="hideAll 2(document.getE lementById('tic kets'))">

<br><br>
<form action="">
<input type="button" value="Show all 2"
onclick="showAl l2(document.get ElementById('ti ckets'));">
<input type="button" value="Hide all 2"
onclick="hideAl l2(document.get ElementById('ti ckets'));">
</form>

<div id="tickets">
<div class="head"><a href="#" onclick="showHi de2(this);">Bro ken Pipe</a>
<div class="items">
<p class="item">At tend site to stop leakage</p>
<p class="item">Ha rry's Hardware at (some address) has
replacement parts</p>
<p class="item">Fi x ASAP - charge to charge code 7</p>
</ol>
</div>
</div>
<div class="head"><a href="#" onclick="showHi de2(this);">Rep air window</a>
<div class="items">
<p class="item">Gl azier on site, needs immediate assistance</p>
<p class="item">En sures WHS standards observed - sharp glass</p>
<p class="item">Ha ve fun</p>
</div>
</div>
<div class="head"><a href="#" onclick="showHi de2(this);">Wif e's birthday</a>
<div class="items">
<p class="item">Do n't forget</p>
<p class="item">Je welry is nice, diamonds preferred</p>
<p class="item">Fl owers to her work (BIG bunch), with soppy card</p>
<p class="item">Di nner, 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]

On Sat, 09 Oct 2004 23:26:18 GMT, McKirahan <Ne**@McKirahan .com> wrote:

var divs = document.getEle mentsByTagName( "div");
var divx;
for (var i=0; i<divs.length; i++) {
divx = divs[i].id;
document.getEle mentById(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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.