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

Show hide div depending on ID

P: 1
I think I'm close (but no banana)..

I have any number of DIV's which I wish to toggle on and off in a web page. I am using

[HTML]<a href="javascript:onclick=showhide('div1');">1. Are you using a monitor?</a><div id="div1" style="display: none;">
If so, are your eyes in line with .. blah ect
<a href="javascript:onclick=showhide('div1');">Close</a></div>

<a href="javascript:onclick=showhide('div2');">2. Are you using a laptop?</a>
<div id="div2" style="display: none;">
If so, are you sitting comfortably with it.. blah etc
<a href="javascript:onclick=showhide('div2');">Close</a></div>
[/HTML]
I think I am nearly there (the second half works) - my problem is extracting the value of a variable and combining this with an if statement...

the code so far:

Expand|Select|Wrap|Line Numbers
  1. var state1 = 'none'; 
  2. var state2 = 'none';
  3. var state3 = 'none';
  4. var state4 = 'none';
  5.  
  6. function showhide(layer_ref) { 
  7. var id = layer_ref.substring(3, layer_ref.length)
  8.  
  9. if (state[id] == 'block') {  // this line doesn't work!!
  10. "state" +  id = 'none';  // and i'm not sure this one does!
  11. else { 
  12. "state" + id = 'block';  //??
  13.  
  14. if (document.all) { 
  15. //IS IE 4 or 5 (or 6 beta) 
  16. eval( "document.all." + layer_ref + ".style.display = state" + id); 
  17. if (document.layers) { //IS NETSCAPE 4 or below 
  18. document.layers[layer_ref].display = state[id]; 
  19. if (document.getElementById &&!document.all) { 
  20. mxw = document.getElementById(layer_ref); 
  21. mxw.style.display = state[id]; 
  22. //-->
  23.  
</script>

I would like to start with an array intialisation (to replace the state1=none state2=none etc) - so any starters here appreciated.

and detect and toggle the status of these states (ie block or none depending on which div is in block or none state). At any one point the user can have all div's on show and the close button closes the right 'div'

Hope this makes sense? Are there any issues with accessibilty that people are aware of with this type of script (with the exception of Javascript being turned off of course

best regards

Snorky
Aug 30 '06 #1
Share this Question
Share on Google+
1 Reply


acoder
Expert Mod 15k+
P: 16,027
Replace each link into this format:
[HTML]<a href="#" onclick="showhide('div1'); return false;">1. Are you using a monitor?</a>[/HTML]
As for the array initialisation, make these changes:
Expand|Select|Wrap|Line Numbers
  1. var state = [];
  2. state[0] = 'none'; 
  3. state[1] = 'none';
  4. state[2] = 'none';
  5. state[3] = 'none';
  6.  
  7. function showhide(layer_ref) { 
  8.     var id = layer_ref.substring(3, layer_ref.length)
  9.  
  10.     if (state[id-1] == 'block') {
  11.         state[id-1] = 'none';
  12.     } else { 
  13.         state[id-1] = 'block';
  14.     } 
  15.  
  16.     if (document.getElementById) { 
  17.         mxw = document.getElementById(layer_ref); 
  18.         mxw.style.display = state[id-1]; 
  19.     } else if (document.all) { // if you need to support legacy browsers 
  20.         document.all[layer_ref].style.display = state[id-1]; 
  21.     } else if (document.layers) {
  22.         document.layers[layer_ref].display = state[id]; 
  23.     } 
  24. }
An alternative way rather than using arrays is to just check the current style.display value and toggle based on that, e.g.
Expand|Select|Wrap|Line Numbers
  1. if (mxw.style.display == "block")
  2.     mxw.style.display = "none";
  3. else
  4.     mxw.style.display = "block";
May 3 '08 #2

Post your reply

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