Hide/Show Divs - Javascript

question.boy

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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javas cript" type="text/javascript">
function HideAll() {
var DivName
//Loop through each lette of the alphabet
for (var i = 0; i < 26; i++) {
//document.write( String.fromChar Code(i+65)+" ");
//Hide the specified div
DivName = String.fromChar Code(i+65);
//alert(DivName);
//document.getEle mentById(''+Div Name+'').style. display=='none' ;
document.getEle mentById('P').s tyle.display==' none';
}
return false;
}

function ShowDiv() {

}
</script>
</head>
<body>
<div id="outerWrappe r">
<div id="header">
<p></p>
</div>
<p><SPAN onclick="JavaSc ript: 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

Subscribe Reply

2976

question.boy

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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javas cript" type="text/javascript">
function HideAll() {
var DivName
//Loop through each lette of the alphabet
for (var i = 0; i < 26; i++) {
//document.write( String.fromChar Code(i+65)+" ");
//Hide the specified div
DivName = String.fromChar Code(i+65);
//alert(DivName);
//document.getEle mentById(''+Div Name
+'').style.disp lay=='none';
document.getEle mentById('P').s tyle.display==' none';
}
return false;

}
function ShowDiv() {
}
</script>
</head>
<body>
<div id="outerWrappe r">
<div id="header">
<p></p>
</div>
<p><SPAN onclick="JavaSc ript: 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

question.boy

On Nov 17, 9:42*pm, question....@ho tmail.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.dt d">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javas cript" type="text/javascript">
function HideAll() {
* * * * var DivName
* * * * //Loop through each lette of the alphabet
* * * * for (var i = 0; i < 26; i++) {
* * * * * * * * //document.write( String.fromChar Code(i+65)+" ");
* * * * * * * * //Hide the specified div
* * * * * * * * DivName = String.fromChar Code(i+65);
* * * * * * * * //alert(DivName);
* * * * * * * * //document.getEle mentById(''+Div Name
+'').style.disp lay=='none';
* * * * * * * * document.getEle mentById('P').s tyle.display==' none';
* * * * }
* * * * return false;

}

function ShowDiv() {

}

</script>
</head>
<body>
<div id="outerWrappe r">
* <div id="header">
* * <p></p>
* </div>
* *<p><SPAN onclick="JavaSc ript: 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.getEle mentById('P').s tyle.display==' none';
should be
document.getEle mentById('P').s tyle.display='n one';

Nov 18 '08 #3

Trevor Lawrence

Reply at bottom

<qu**********@h otmail.comwrote in message
news:ba******** *************** ***********@z28 g2000prd.google groups.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.dt d">
<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.fromChar Code(i+65);
HTML += '<SPAN id="hide' + letter + '" onclick="hideAl l(\'' + letter +
'\');"><u>' + letter + '</u></SPAN>';
HTML += (i<25) ? '-':''
}
document.getEle mentById('alpha bet').innerHTML = HTML;
}

function hideAll(divSele cted) {
//Loop through each letter of the alphabet
for (var i = 0; i < 26; i++) {
// Show the specified div ; Hide all othere
var DivName = String.fromChar Code(i+65);
document.getEle mentById(DivNam e).style.displa y
= (divSelected==D ivName)?'':'non e';
}
return false;
}
</script>

</head>
<body onload="init(); hideAll(0)">
<div id="outerWrappe r">
<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

Num GG

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

David Mark

On Nov 17, 10:34*pm, "Trevor Lawrence" <Trevor L.@Canberrawrot e:

Reply at bottom

<question....@h otmail.comwrote in message

news:ba******** *************** ***********@z28 g2000prd.google groups.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.dt d">
<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.fromChar Code(i+65);
* * HTML += '<SPAN id="hide' + letter + '" onclick="hideAl l(\''+ letter +
'\');"><u>' + letter *+ '</u></SPAN>';
* * HTML += (i<25) ? '-':''
* }
* document.getEle mentById('alpha bet').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

Similar topics

6308

Can I hide relatively proistioned divs with z-index?

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 onMouseOver/onMouseOut but leave a blank space on the page when hidden (the space where the divs would normally be). Is it possible to use z-indexing to put regular content where the hidden divs would be? When I try to do this, the layers don't unhide as...

HTML / CSS

8013

Hide / Show form Elements.

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) document.layers.visibility = 'visible'; else if (document.all) { document.all.style.visibility = 'visible';

Javascript

3207

Button won't fire after show/hide div

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 the button. If I quit using the divs, and do a postback on the radiobutton selection, showing/hiding tables instead, the button is ok and continues to work. I've tried a variety of controls instead of the button in a variety of places but it...

ASP.NET

4233

Swap/restore image while show/hide divs

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 I would really like to use linked images instead to do the following: - When open.gif is clicked, the contents of the div show and open.gif is swapped with close.gif - subsequently, when close.gif is clicked, the div contents get hidden

Javascript

16762

Nested Show Hide Div Form Elements

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 div information. I want a nested show hide element though. So when you click on "Do you have carpets to be cleaned?" Small Rooms & Medium Rooms appears (that I got working) But Then when you click on Small rooms or medium rooms i want the three lines...

Javascript

8441

Help about div hide/show

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 form tags and div elements say n. The problem

Javascript

7846

hide all divs without array?

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 15-20 divs, and I need users to be able to select a sequence of divs - basically like a series of yes/no questions that, when "yes" or "no" is selected, displays the appropriate div as well as what's come before it. I can hide all divs and display...

Javascript

2151

hide some divs, show some others (but not all)

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 visible - 'a100', 'a200', 'a300' for the first 'layer'; 'b100', 'b200', 'b300' for the second; 'c100, 'c200', 'c300' for the third ... etc I'm writing the javascript functions to hide and show the appropriate divs and its getting out of hand pretty...

Javascript

4874

show/hide div not fully working in IE

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 starting divs on my page, each one expanding onclick. The show/hide elemant works fine. There is one slight problem... I want the user to be able to click anywhere inside the starting div in order for the hidden div to be revealed. This is ok for the...

Javascript

4476

Show/hide divs according to server side variable

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: changeStylesMouseOver('5');" onmouseout="javascript: changeStylesMouseOut('5');" onclick="location='/AddProject.aspx'"> <div class="leftBarLinkText"> Add Project

ASP.NET

9689

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

10269

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

10248

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

9085

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

7573

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

6811

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4148

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated we have to send another system

C# / C Sharp

3764

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2942

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General