By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,931 Members | 1,247 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,931 IT Pros & Developers. It's quick & easy.

hide all divs without array?

P: 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
Share this Question
Share on Google+
11 Replies


gits
Expert Mod 5K+
P: 5,329
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

P: 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
Expert Mod 5K+
P: 5,329
in your hideallids-function you refer to ids that should be divs i think :)
Jan 22 '08 #4

P: 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
Expert Mod 15k+
P: 16,027
Put the "var ids = ..." line into the hidealldivs function.
Jan 24 '08 #6

gits
Expert Mod 5K+
P: 5,329
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

P: 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
Expert Mod 5K+
P: 5,329
glad to hear you got it working :) ... post back to the forum anytime you have more questions ...

kind regards
Jan 30 '08 #9

acoder
Expert Mod 15k+
P: 16,027
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

P: 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
Expert Mod 5K+
P: 5,329
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.