Hide/Show Divs

Q

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.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>
</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
 
Q

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.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>
 
Q

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.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>
Click to expand...

Never mind. It was an extra =!!!!

document.getElementById('P').style.display=='none';
should be
document.getElementById('P').style.display='none';
 
T

Trevor Lawrence

Reply at bottom

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
Click to expand...

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>
 
N

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
Click to expand...
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
 
D

David Mark

Reply at bottom




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.
Click to expand...
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]
Click to expand...

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?
Click to expand...
Thank you so very much for the enlightenment!
Click to expand...
QB
Click to expand...

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;
Click to expand...

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]
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
How do I hide the modal after 5 seconds? 4
I am trying to make an audio player, how do I get the selected file to be playable? 5
Can someone tell me if this a real tracker? Or is it one designed to show you a different message at certain times, ie. acting like one? 0
Show/Hide div NOT workink in IE 10
Sticky Header - How Do I Make It Hide/Show on Scroll? 0
Closing an overlay outside the overlay as well 1
Need help , Having problem with Drag n Drop... 1

Members online

Total: 38 (members: 2, guests: 36)
Robots: 457

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top