468,136 Members | 1,438 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,136 developers. It's quick & easy.

hide all divs without array?

7
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 one, no problem. But thats no good cause a user needs to be able see the all the divs which have been selected in sequence.

I can hide each one individually and show the ones I need individually, but this is going to get messy with long strings of actions for each onclick.

I understand you can set up an array in the head of the page and use a hideall function like the one below, but the problem here is this: the platform used to view the pages requires a template to be used for each page, and the head section can only be located in the template itself, not the page body. So, I can create a template and store the javascript in the head section, but if I make an array then each page has to have the same number of divs, and they all have to have the same ids.

So unless I'm missing something, an array in the head section won't work either unless there's a way you can set an array without naming each div in it. (and I don't want to create a new template for each page).

So the question is, how do I make a simple hideall function given that I can't define an array in the head section?

(I've also tried putting the array in the body, but the viewing platform doesn't accept this for some reason)

I've tried a few different scripts, but the one I like best is below, taken from another post in these forums -

[HTML]<SCRIPT LANGUAGE="JavaScript">
//here you place the ids of every element you want.
var ids=new Array('A','B','C');

function switchid1(id){
hideallids1();
showdiv1(id);
}

function hideallids1(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv1(ids[i]);
}
}

function hidediv1(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv1(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}
</SCRIPT>

</head>

<body>[/HTML]
Jan 22 '08 #1
11 7592
gits
5,390 Expert Mod 4TB
hi ...

you may use the:

Expand|Select|Wrap|Line Numbers
  1. document.getElementsByTagName('div');
method for this purpose. that returns a list of all divs in the page. in case you want specified divs to be affected only you may set a class that could act as an secondary identifier:

[HTML]<div class="secondary"/>whatever</div>[/HTML]
so with that we could do:

Expand|Select|Wrap|Line Numbers
  1. var divs = document.getElementsByTagName('div');
  2.  
  3. for (var i = 0, ele; ele = divs[i]; i++) {
  4.     if (ele.className == "secondary") {
  5.         // do something with all 'secondary'-class-divs
  6.     }
  7. }
kind regards
Jan 22 '08 #2
dusk
7
Thanks gits, that seems like its exactly what I'm looking for. But I can't get it to work in my code...

You can see below there's a button which I made earlier to hide each div separately, and a new button which I tried to make hide all divs with the hideallids function, but its not working.

If anyone has any ideas they'd be much appreciated!

(incidentally, I don't think I'll need to use the secondary class element, because at this stage all I'm after is a hideall function that works - I'll use the hideall in conjuction with a few showdiv's to display the ones I need at each point)

Code:

[HTML]<head>
<script language="JavaScript">

var divs = document.getElementsByTagName('div')

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}



function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}

</script>
</head>

<body>

<a href="javascript:showdiv('a1');hidediv('b1');hided iv('b2');hidediv('b3');hidediv('b4');hidediv('a2') ">First Layer Yes</a>
<a href="javascript:showdiv('a2');hidediv('b3');hided iv('b4');hidediv('b1');hidediv('b2');hidediv('a1') ">First Layer No</a>
<input type="button" onclick="javascript:hidediv('a1');hidediv('a2')" value="Clear all"</a>
<input type="button" onclick="javascript:hideallids()" value="Hide all"</a>

<div id='a1' style="display:none;">
First Layer Yes Content Yes<BR><BR>

<input type="button" onclick="javascript:showdiv('b1');hidediv('b2')" value="Second Layer Yes"</a>
<input type="button" onclick="javascript:showdiv('b2');hidediv('b1')" value="Second Layer No"</a>

</div>

<div id='b1' style="display:none">
Second Layer Yes Content
</div>

<div id='b2' style="display:none">
Second Layer Content No
</div>

<div id='a2' style="display:none;">
First Layer Content No<BR><BR>

<input type="button" onclick="javascript:showdiv('b3');hidediv('b4')" value="Second Layer Content Yes"</a>
<input type="button" onclick="javascript:showdiv('b4');hidediv('b3')" value="Second Layer Content No"</a>

</div>

<div id='b3' style="display:none">
Second Layer Content Yes
</div>

<div id='b4' style="display:none">
Second Layer Content No
</div>

</body>[/HTML]
Jan 22 '08 #3
gits
5,390 Expert Mod 4TB
in your hideallids-function you refer to ids that should be divs i think :)
Jan 22 '08 #4
dusk
7
ok I've had a got with this but still can't get it working. I've tried putting:

var divs=document.getElementsByTagName('div')

at the start too but no luck.

Here's the simplified code that 'looks' like it should work to me, but doesn't...

[html]
<script language="JavaScript">

var ids=document.getElementsByTagName('div')

function switchid(id){
hideallids();
showdiv(id);
}

function hideallids(){
//loop through the array and hide each element by id
for (var i=0;i<ids.length;i++){
hidediv(ids[i]);
}
}

function hidediv(id) {
//safe function to hide an element with a specified id
if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'none';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'none';
}
else { // IE 4
document.all.id.style.display = 'none';
}
}
}

function showdiv(id) {
//safe function to show an element with a specified id

if (document.getElementById) { // DOM3 = IE5, NS6
document.getElementById(id).style.display = 'block';
}
else {
if (document.layers) { // Netscape 4
document.id.display = 'block';
}
else { // IE 4
document.all.id.style.display = 'block';
}
}
}

</script>
</head>

<body>

<a href="javascript:showdiv('a1');hidediv('a2')">Firs t Layer Yes</a>
<a href="javascript:showdiv('a2');hidediv('a1')">Firs t Layer No</a>
<input type="button" onclick="javascript:hideallids()" value="Hide all"</a>

<div id='a1' style="display:none;">
First Layer Yes Content<BR><BR>
</div>

<div id='a2' style="display:none;">
First Layer Content No<BR><BR>
</div>
</body>
</html>[/html]
Jan 23 '08 #5
acoder
16,027 Expert Mod 8TB
Put the "var ids = ..." line into the hidealldivs function.
Jan 24 '08 #6
gits
5,390 Expert Mod 4TB
the problem is that you retrieve the div-node-list during load where the dom is not ready to use ... so to fix that you could use the tip of acoder or retrieve the nodes onload of your document's body ...

kind regards
Jan 24 '08 #7
dusk
7
Thanks for the help, I couldn't find a way to get the var divs = document.getElementsByTagName('div') line working, but I found another function which works fine, and it uses that line:

[html]

<script>

function clearAllDivs(pass) {
var divs = document.getElementsByTagName('div');
for(i=0;i<divs.length;i++){
if(divs[i].id.match(pass)){//if they are 'see' divs
if (document.getElementById) // DOM3 = IE5, NS6
divs[i].style.display="none";// show/hide
else
if (document.layers) // Netscape 4
document.layers[divs[i]].display = 'none';
else // IE 4
document.all.divs[i].display = 'none';
} else {
if (document.getElementById)
divs[i].style.display="none";
else
if (document.layers) // Netscape 4
document.divs[i].display = 'none';
else // IE 4
document.all.divs[i].display = 'none';
}
}
}

</script>

</head>

<body>

<a href="javascript:clearAllDivs()">Clear all divs</a>

[/html]
Jan 29 '08 #8
gits
5,390 Expert Mod 4TB
glad to hear you got it working :) ... post back to the forum anytime you have more questions ...

kind regards
Jan 30 '08 #9
acoder
16,027 Expert Mod 8TB
Thanks for the help, I couldn't find a way to get the var divs = document.getElementsByTagName('div') line working, but I found another function which works fine, and it uses that line:
If you don't need to support Netscape 4 and IE4, you can trim that function to half its size.
Jan 30 '08 #10
krazin
1
yes, but you didnt make the hidealldivs work.
I have that same problem.


Expand|Select|Wrap|Line Numbers
  1. var ids=new Array();
  2.  
  3. function switchid(id){    
  4.     hideallids();
  5.     showdiv(id);
  6. }
  7.  
  8. function hideallids(){
  9.     //loop through the array and hide each element by id
  10.     for (var i=0;i<ids.length;i++){
  11.         hidediv(ids[i]);
  12.     }          
  13. }
  14.  
  15. function hidediv(id) {
  16.     //safe function to hide an element with a specified id
  17.     if (document.getElementById) { // DOM3 = IE5, NS6
  18.         document.getElementById(id).style.display = 'none';
  19.     }
  20.     else {
  21.         if (document.layers) { // Netscape 4
  22.             document.id.display = 'none';
  23.         }
  24.         else { // IE 4
  25.             document.all.id.style.display = 'none';
  26.         }
  27.     }
  28. }
Jul 8 '08 #11
gits
5,390 Expert Mod 4TB
please tell exactly what is not working properly, and show where you assign the nodelist ...

kind regards
Jul 9 '08 #12

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

6 posts views Thread by Mel | last post: by
4 posts views Thread by bridgemanusa | last post: by
3 posts views Thread by Sarah W | last post: by
2 posts views Thread by shapper | last post: by
1 post views Thread by gcdp | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.