473,236 Members | 1,332 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

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

Hide/Show Divs

I am trying to control the visibility of a set of div based on
selected values but can't seem to get it right. Below is what I have
so far but it does not work at all.

The basic concept was to have a set of Divs A through Z and by click
the associated text character that Div would be visible and all others
would be hidden.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function HideAll() {
var DivName
//Loop through each lette of the alphabet
for (var i = 0; i < 26; i++) {
//document.write(String.fromCharCode(i+65)+" ");
//Hide the specified div
DivName = String.fromCharCode(i+65);
//alert(DivName);
//document.getElementById(''+DivName+'').style.displ ay=='none';
document.getElementById('P').style.display=='none' ;
}
return false;
}

function ShowDiv() {

}
</script>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<p></p>
</div>
<p><SPAN onclick="javascript: return HideAll();">A</SPAN>-B-C-D-E-F-
G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
</div>
</body>
</html>

On a side note, working with javascript, how does a professional
developer troubleshot functions etc? Are there any tools that permit
evaluating variable, placing code breaks, outputing error codes/desc.,
etc during execution?

Thank you so very much for the enlightenment!

QB
Nov 18 '08 #1
5 2943
Sorry my HTML was incomplete. Here it is again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function HideAll() {
var DivName
//Loop through each lette of the alphabet
for (var i = 0; i < 26; i++) {
//document.write(String.fromCharCode(i+65)+" ");
//Hide the specified div
DivName = String.fromCharCode(i+65);
//alert(DivName);
//document.getElementById(''+DivName
+'').style.display=='none';
document.getElementById('P').style.display=='none' ;
}
return false;

}
function ShowDiv() {
}
</script>
</head>
<body>
<div id="outerWrapper">
<div id="header">
<p></p>
</div>
<p><SPAN onclick="javascript: return HideAll();">A</SPAN>-B-C-D-E-
F-
G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
<div id="M"><p>M text goes here</p></div>
<div id="P"><p>P text goes here</p></div>
</div>
</body>
</html>
Nov 18 '08 #2
On Nov 17, 9:42*pm, question....@hotmail.com wrote:
Sorry my HTML was incomplete. *Here it is again

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" type="text/javascript">
function HideAll() {
* * * * var DivName
* * * * //Loop through each lette of the alphabet
* * * * for (var i = 0; i < 26; i++) {
* * * * * * * * //document.write(String.fromCharCode(i+65)+" ");
* * * * * * * * //Hide the specified div
* * * * * * * * DivName = String.fromCharCode(i+65);
* * * * * * * * //alert(DivName);
* * * * * * * * //document.getElementById(''+DivName
+'').style.display=='none';
* * * * * * * * document.getElementById('P').style.display=='none' ;
* * * * }
* * * * return false;

}

function ShowDiv() {

}

</script>
</head>
<body>
<div id="outerWrapper">
* <div id="header">
* * <p></p>
* </div>
* *<p><SPAN onclick="javascript: return HideAll();">A</SPAN>-B-C-D-E-
F-
G-H-I-J-K-L-M-N-O-P-Q-R-S-T-U-V-W-X-Y-Z</p>
* <div id="M"><p>M text goes here</p></div>
* <div id="P"><p>P text goes here</p></div>
</div>
</body>
</html>
Never mind. It was an extra =!!!!

document.getElementById('P').style.display=='none' ;
should be
document.getElementById('P').style.display='none';
Nov 18 '08 #3
Reply at bottom

<qu**********@hotmail.comwrote in message
news:ba**********************************@z28g2000 prd.googlegroups.com...
>I am trying to control the visibility of a set of div based on
selected values but can't seem to get it right. Below is what I have
so far but it does not work at all.

The basic concept was to have a set of Divs A through Z and by click
the associated text character that Div would be visible and all others
would be hidden.

[snip]

On a side note, working with javascript, how does a professional
developer troubleshot functions etc? Are there any tools that permit
evaluating variable, placing code breaks, outputing error codes/desc.,
etc during execution?

Thank you so very much for the enlightenment!

QB
I didn't look at the two later posts but try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">
function init(){
var HTML = '<p>Click letter to show relevant division</p>'
for (var i = 0; i < 26; i++) {
var letter = String.fromCharCode(i+65);
HTML += '<SPAN id="hide' + letter + '" onclick="hideAll(\'' + letter +
'\');"><u>' + letter + '</u></SPAN>';
HTML += (i<25) ? '-':''
}
document.getElementById('alphabet').innerHTML = HTML;
}

function hideAll(divSelected) {
//Loop through each letter of the alphabet
for (var i = 0; i < 26; i++) {
// Show the specified div ; Hide all othere
var DivName = String.fromCharCode(i+65);
document.getElementById(DivName).style.display
= (divSelected==DivName)?'':'none';
}
return false;
}
</script>

</head>
<body onload="init();hideAll(0)">
<div id="outerWrapper">
<div id="header">
<p></p>
</div>

<div id="alphabet"></div>

<div id="A">Div A</div>
<div id="B">Div B</div>
<div id="C">Div C</div>
<div id="D">Div D</div>
<div id="E">Div E</div>
<div id="F">Div F</div>
<div id="G">Div G</div>
<div id="H">Div H</div>
<div id="I">Div I</div>
<div id="J">Div J</div>
<div id="K">Div K</div>
<div id="L">Div L</div>
<div id="M">Div M</div>
<div id="N">Div N</div>
<div id="O">Div O</div>
<div id="P">Div P</div>
<div id="Q">Div Q</div>
<div id="R">Div R</div>
<div id="S">Div S</div>
<div id="T">Div T</div>
<div id="U">Div U</div>
<div id="V">Div V</div>
<div id="W">Div W</div>
<div id="X">Div X</div>
<div id="Y">Div Y</div>
<div id="Z">Div Z</div>
Some extra stuff (not hidden)
</div>
</body>
</html>

--
Trevor Lawrence
Canberra
Web Site http://trevorl.mvps.org
Nov 18 '08 #4
On a side note, working with javascript, how does a professional
developer troubleshot functions etc? *Are there any tools that permit
evaluating variable, placing code breaks, outputing error codes/desc.,
etc during execution?

Thank you so very much for the enlightenment!

QB
For this: Just install Firefox and the plugin named Firebug...
You'll get it! (break points, step by step running, spies on variables
and so on...)

Cheers

Num

Nov 18 '08 #5
On Nov 17, 10:34*pm, "Trevor Lawrence" <Trevor L.@Canberrawrote:
Reply at bottom

<question....@hotmail.comwrote in message

news:ba**********************************@z28g2000 prd.googlegroups.com...
I am trying to control the visibility of a set of div based on
selected values but can't seem to get it right. *Below is what I have
so far but it does not work at all.
The basic concept was to have a set of Divs A through Z and by click
the associated text character that Div would be visible and all others
would be hidden.
[snip]
On a side note, working with javascript, how does a professional
developer troubleshot functions etc? *Are there any tools that permit
evaluating variable, placing code breaks, outputing error codes/desc.,
etc during execution?
Thank you so very much for the enlightenment!
QB

I didn't look at *the two later posts but try this

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">
function init(){
* var HTML = '<p>Click letter to show relevant division</p>'
* for (var i = 0; i < 26; i++) {
* * var letter = String.fromCharCode(i+65);
* * HTML += '<SPAN id="hide' + letter + '" onclick="hideAll(\''+ letter +
'\');"><u>' + letter *+ '</u></SPAN>';
* * HTML += (i<25) ? '-':''
* }
* document.getElementById('alphabet').innerHTML = HTML;
You are replacing perfectly good static markup with some sort of
scripted faux links, using deprecated markup and a non-standard
property assignment. Just make them links (to bookmarks "A" through
"Z") to start with. If you detect getEBI and can find the "alphabet"
div, then attach a click listener to it (or use onclick) and delegate
from there.

[snip]
Nov 19 '08 #6

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

Similar topics

12
by: deko | last post by:
Is there any way to work around the blank space created by hidden divs? I'm trying to use a relatively postioned divs with show/hide behaviors to annotate an image. The divs show/hide...
4
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
5
by: dje | last post by:
In the OnClick event on a radioButtonList, I run a javascript to show/hide the appropriate div along with a submit button, which displays as expected. The problem is the submit no longer works on...
4
by: bridgemanusa | last post by:
Hi All: I have a very long page of html that I want to take portions and hide them in divs, then show when a link is clicked. I have the hide show part working when the link is clicked, however...
1
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the...
5
by: ali | last post by:
Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of...
11
by: dusk | last post by:
Hi, I'm very new to javascript, and I'm having trouble finding a way to display a string of divs without the code getting really messy. I have several different pages to write, each with about...
2
by: dusk | last post by:
Hi, I have a page with lots of hidden divs which are revealed based on choices made at each 'layer'. So I've used naming convention which represents the order in which each div becomes...
18
by: ryrocks | last post by:
Hi, Im making a 'contact us' page. The user click on the div, this then reveals another larger div displaying more information giving the effect of the box expanding or dropping down. I have 3...
5
by: Mike P | last post by:
How would I show or hide a div that is using client side Javascript based upon a server side variable? Here are my divs : <div id="idButton5" class="otherLeftBarLink" onmouseover="javascript:...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: jianzs | last post by:
Introduction Cloud-native applications are conventionally identified as those designed and nurtured on cloud infrastructure. Such applications, rooted in cloud technologies, skillfully benefit from...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....
0
by: DolphinDB | last post by:
The formulas of 101 quantitative trading alphas used by WorldQuant were presented in the paper 101 Formulaic Alphas. However, some formulas are complex, leading to challenges in calculation. Take...
0
by: Aftab Ahmad | last post by:
Hello Experts! I have written a code in MS Access for a cmd called "WhatsApp Message" to open WhatsApp using that very code but the problem is that it gives a popup message everytime I clicked on...
0
by: Aftab Ahmad | last post by:
So, I have written a code for a cmd called "Send WhatsApp Message" to open and send WhatsApp messaage. The code is given below. Dim IE As Object Set IE =...

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.