468,136 Members | 1,481 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 some divs, show some others (but not all)

7
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 quickly - I have to 'showdiv' each div in the sequence that the user chooses, and also 'hidediv' every other choice which could potentially have been made (since if a user goes back a step in the sequence and clicks on a different choice it needs to hide what has already been displayed).

What I'm after is a way to use 'hidediv' to span multiple divs using the naming convention above - like using a partial name plus asterisk to find all the names which match the partial name given. But preferably it would recognise alphanumeric order...

Like if I could use:

[html]<A href="javascript:hidediv('b*')">click here</A>[/html]

to hide all divs with ids beginning with 'b' or later in the alphabet

Here's the javascript:

[html]

<script language="JavaScript">

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>

[/html]

and here's some html:

[html]

choose <A href="javascript:showdiv('a100');hidediv('a200');h idediv('b100');hidediv('b200');hidediv('c100');hid ediv('c200')">a100</A> or <A href="javascript:showdiv('a200');hidediv('a100');h idediv('b100');hidediv('b200');hidediv('c100');hid ediv('c200')">a200</A>
<DIV id=a100 style="DISPLAY: none">a100 content<BR><BR>choose <A href="javascript:showdiv('b100');hidediv('b200');h idediv('c100);hidediv(c200')">b100</A> or <A href="javascript:showdiv('b200');hidediv('b100');h idediv('c100');hidediv('c200')">b200</A></DIV>
<DIV id=a200 style="DISPLAY: none">a200 content<BR><BR>choose <A href="javascript:showdiv('b100');hidediv('b200');h idediv('c100);hidediv(c200')">b100</A> or <A href="javascript:showdiv('b200');hidediv('b100');h idediv('c100');hidediv('c200')">b200</A></DIV>
<DIV id=b100 style="DISPLAY: none">b100 content<BR><BR>choose <A href="javascript:showdiv('c100');hidediv('c200')"> c100</A> or <A href="javascript:showdiv('c200');hidediv('c100')"> c200</A></DIV>
<DIV id=b200 style="DISPLAY: none">b200 content<BR><BR>choose <A href="javascript:showdiv('c100');hidediv('c200');" >c100</A> or <A href="javascript:showdiv('c200');hidediv('c100');" >c200</A></DIV>
<DIV id=c100 style="DISPLAY: none">this is c100 content</DIV>
<DIV id=c200 style="DISPLAY: none">this is c200 content</DIV>

[/html]
Feb 22 '08 #1
2 1764
hsriat
1,654 Expert 1GB
[html]<A href="javascript:hidediv('b', 1)">click here</A>[/html]

Expand|Select|Wrap|Line Numbers
  1. function hidediv(id, ALL) {
  2.     //safe function to hide an element with a specified id
  3.     //if ALL flag is on, hide all starting with what provided as id 
  4.  
  5.     if (document.getElementById) { // DOM3 = IE5, NS6
  6.         if (ALL) {
  7.             var divs = document.getElementsByTagName('div');
  8.             for (var i=0; i<divs.length; i++)
  9.             if (divs[i].id.match('^'+id))
  10.             document.getElementById(id).style.display = 'none';
  11.         }
  12.         else document.getElementById(id).style.display = 'none';
  13.     }
  14.  
  15.     //change the remaining accordingly... (it don't think it will work for IE4)
  16.     }
  17.     else {
  18.         if (document.layers) { // Netscape 4
  19.             document.id.display = 'none';
  20.         }
  21.         else { // IE 4
  22.             document.all.id.style.display = 'none';
  23.         }
  24.     }
  25. }
Feb 22 '08 #2
dusk
7
ok I've tried this but I can't get it to work... it gives me an 'error on page' message when I try using this

[html]

<A href="javascript:hidediv('a', 1)">click here</A> to hide

[/html]

and if I give it the exact name of a div, it hides that div correctly but not the others:

[html]

<A href="javascript:hidediv('a100', 1)">click here</A> to hide

[/html]

here's my code:


Expand|Select|Wrap|Line Numbers
  1.  
  2. function showdiv(id) {
  3.     //safe function to show an element with a specified id
  4.  
  5.     if (document.getElementById) { // DOM3 = IE5, NS6
  6.         document.getElementById(id).style.display = 'block';
  7.     }
  8.     else {
  9.         if (document.layers) { // Netscape 4
  10.             document.id.display = 'block';
  11.         }
  12.         else { // IE 4
  13.             document.all.id.style.display = 'block';
  14.         }
  15.     }
  16. }
  17.  
  18.  
  19. function hidediv(id, ALL) {
  20.     //safe function to hide an element with a specified id
  21.     //if ALL flag is on, hide all starting with what provided as id 
  22.  
  23.     if (document.getElementById) { // DOM3 = IE5, NS6
  24.         if (ALL) {
  25.             var divs = document.getElementsByTagName('div');
  26.             for (var i=0; i<divs.length; i++)
  27.             if (divs[i].id.match('^'+id))
  28.             document.getElementById(id).style.display = 'none';
  29.         }
  30.         else document.getElementById(id).style.display = 'none';
  31.     }
  32. }
  33.  
  34.  

[html]

click here to show:<BR><BR><BR>

<A href="javascript:showdiv('a100')">a100</A><BR><BR><BR>

<A href="javascript:showdiv('a1002')">a1002</A><BR><BR><BR>

<A href="javascript:showdiv('a1003')">a1003</A><BR><BR><BR>

<div id=a100 style="DISPLAY: none">div a100 content</DIV>

<div id=a1002 style="DISPLAY: none">div a1002content</DIV>

<div id=a1003 style="DISPLAY: none">div a1003content</DIV>


<BR><BR>

<A href="javascript:hidediv('a', 1)">click here</A> to hide

[/html]
Feb 24 '08 #3

Post your reply

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

Similar topics

4 posts views Thread by jerryyang_la1 | last post: by
4 posts views Thread by bridgemanusa | last post: by
5 posts views Thread by ali | last post: by
11 posts views Thread by dusk | last post: by
5 posts views Thread by question.boy | 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.