472,794 Members | 2,247 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 472,794 software developers and data experts.

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.
Jul 23 '05 #1
5 1505
"mt" <mi********@HTOmail.com> wrote in message
news:le********************@comcast.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><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[i].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>
Jul 23 '05 #2

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[i].style.display == 'none') {
b[i].style.display = '';
} else {
b[i].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>
Jul 23 '05 #3
mt
Thanks! I'll try it out!
Jul 23 '05 #4
mt
Thanks! I will see what I can do with this.
Jul 23 '05 #5
On Sat, 09 Oct 2004 23:26:18 GMT, McKirahan <Ne**@McKirahan.com> wrote:
var divs = document.getElementsByTagName("div");
var divx;
for (var i=0; i<divs.length; i++) {
divx = divs[i].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

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.
Jul 23 '05 #6

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

7
by: Michael Foord | last post by:
#!/usr/bin/python -u # 15-09-04 # v1.0.0 # auth_example.py # A simple script manually demonstrating basic authentication. # Copyright Michael Foord # Free to use, modify and relicense. #...
2
by: c.anandkumar | last post by:
Hi All - I have some problems getting a small piece of javascript working correctly for Firefox. Here is what I am trying to do - 1. I have a form (like a search form) 2. I have many groups...
2
by: EventListener | last post by:
I have a folder/file tree that is dynamically generated from an xml file. The way I've written it seems to work. Since I'm a fairly novice javascript programmer, I'm concerned that there may be a...
1
by: Amber | last post by:
The DataGrid allows you to make columns visible or invisible on demand - even edit and other special columns. This article will show you how it is done. Some developers have reported problems...
2
by: darrel | last post by:
When showing/hiding items on the front end via codebehind, one normally just sets the object to runat='server' and then set's its visibility to false. This works fine. However, when I have a...
11
by: Alex | last post by:
Hello all, I have a main form(say "form1") .i want to display another form(say "form2") on occuring of an event (say a button click) and want to hide it after some time so that it will again...
2
by: =?Utf-8?B?Sm9zaCBTY2htaWR0?= | last post by:
I have a gridview that is being used for managing inventory. The default view shows the stock currently available. When editing I don't want the stock to be directly edited, rather the user will...
12
by: Ste | last post by:
Hi there, I've got a website with a list of Frequently Asked Questions, so there's a question and answer in a long list down the page. Can anyone recommend a simple script that would allow me...
17
by: rohitchawla | last post by:
i am trying to show and hide a div when onmouseover and onmouseover another div element. i am setting a setTimeout duration on onmouseout to delay the hiding of div for around two second The...
4
Fane
by: Fane | last post by:
I have a label in program showing that the textbox's text is copied to clipboard. At the start it is not visible, but after the button is clicked, it becomes visible. After this I would want it to...
0
by: erikbower65 | last post by:
Using CodiumAI's pr-agent is simple and powerful. Follow these steps: 1. Install CodiumAI CLI: Ensure Node.js is installed, then run 'npm install -g codiumai' in the terminal. 2. Connect to...
0
linyimin
by: linyimin | last post by:
Spring Startup Analyzer generates an interactive Spring application startup report that lets you understand what contributes to the application startup time and helps to optimize it. Support for...
0
by: erikbower65 | last post by:
Here's a concise step-by-step guide for manually installing IntelliJ IDEA: 1. Download: Visit the official JetBrains website and download the IntelliJ IDEA Community or Ultimate edition based on...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Sept 2023 starting at 18:00 UK time (6PM UTC+1) and finishing at about 19:15 (7.15PM) The start time is equivalent to 19:00 (7PM) in Central...
0
by: Taofi | last post by:
I try to insert a new record but the error message says the number of query names and destination fields are not the same This are my field names ID, Budgeted, Actual, Status and Differences ...
14
DJRhino1175
by: DJRhino1175 | last post by:
When I run this code I get an error, its Run-time error# 424 Object required...This is my first attempt at doing something like this. I test the entire code and it worked until I added this - If...
5
by: DJRhino | last post by:
Private Sub CboDrawingID_BeforeUpdate(Cancel As Integer) If = 310029923 Or 310030138 Or 310030152 Or 310030346 Or 310030348 Or _ 310030356 Or 310030359 Or 310030362 Or...
0
by: lllomh | last post by:
Define the method first this.state = { buttonBackgroundColor: 'green', isBlinking: false, // A new status is added to identify whether the button is blinking or not } autoStart=()=>{
0
by: lllomh | last post by:
How does React native implement an English player?

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.