469,612 Members | 1,529 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

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

Hide / Show form elements + tabs

9
I have a script that hides / shows form elements, and wrapped in a tab script (tab navigation). When the code is duplicated (per tab content), the hide / show function works for the first tab but breaks in each subsequent tab. Why? Help appreciated!

Example: http://geocities.com/edmurphy21/

hide / show script:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function showHide()
  3. {
  4. var idx = this.id.split('-')[1];
  5. var sp = document.getElementById('cont-'+idx);
  6. sp.style.display = ('' == sp.style.display)? 'none':'';
  7. }
  8.  
  9. function initContent()
  10. {
  11. // Check that necessary features are supported
  12. if ( !document.getElementById
  13. || !document.getElementsByTagName
  14. || !document.body.style){
  15. return;
  16. }
  17. // Get all the div elements we need
  18. var x = document.getElementById('container');
  19. var divs = x.getElementsByTagName('div');
  20. // Depending on classname, add an onclick or hide
  21. var el, i = divs.length;
  22. while ( i-- ){
  23. el = divs[i];
  24. if (el.className && /\bheading\b/.test(el.className)){
  25. el.onclick = showHide;
  26. } else if (el.className && /\bcontent\b/.test(el.className)){
  27. el.style.display = 'none';
  28. }
  29. }
  30. }
  31. window.onload = initContent;
  32. </script>
body code:
Expand|Select|Wrap|Line Numbers
  1. <body>
  2. <div id="pagecontent"> 
  3.   <h2 class="tabset_label">Table of Contents</h2>
  4.   <ul class="tabset_tabs">
  5.     <li class="firstchild"><a href="#tab-1" class="preActive active">TAB-1</a></li>
  6.     <li><a class="preActive postActive" href="#tab-2">TAB-2</a></li>
  7.     <li><a class="preActive" href="#tab-3">TAB-3</a></li>
  8.     <li><a class="" href="#tab-4">TAB-4</a></li>
  9.   </ul>
  10.   <div id="tab-1" class="tabset_content tabset_content_active"> 
  11.     <h2 class="tabset_label">TAB-1</h2>
  12.     <form action="" method="post">
  13.       <div style="border: 1px solid #ddddff;" id="container"> 
  14.         <div class="heading" id="head-1"> First Name: 1</div>
  15.         <div class="content" id="cont-1"> 
  16.           <input name="" type="text">
  17.         </div>
  18.         <div class="heading" id="head-2"> Last Name: 2</div>
  19.         <div class="content" id="cont-2"> 
  20.           <input name="" type="text">
  21.         </div>
  22.       </div>
  23.       <input id="submit" name="submit" type="submit" value="submit" />
  24.     </form>
  25.   </div>
  26.   <div id="tab-2" class="tabset_content"> 
  27.     <h2 class="tabset_label">TAB-2</h2>
  28.     <form action="" method="post">
  29.       <div style="border: 1px solid #ddddff;" id="container"> 
  30.         <div class="heading" id="head-3"> First Name: 3</div>
  31.         <div class="content" id="cont-3"> 
  32.           <input name="" type="text">
  33.         </div>
  34.         <div class="heading" id="head-4"> Last Name: 4</div>
  35.         <div class="content" id="cont-4"> 
  36.           <input name="" type="text">
  37.         </div>
  38.       </div>
  39.       <input id="submit" name="submit" type="submit" value="submit" />
  40.     </form>
  41.   </div>
  42.   <div id="tab-3" class="tabset_content"> 
  43.     <h2 class="tabset_label">TAB-3</h2>
  44.   </div>
  45.   <div id="tab-4" class="tabset_content"> 
  46.     <h2 class="tabset_label">TAB-4</h2>
  47.   </div>
  48. </div>
  49. </body>
Sep 26 '07 #1
15 3459
acoder
16,027 Expert Mod 8TB
Welcome to TSDN!

The id must be unique. You have two divs with the id "container".
Sep 26 '07 #2
worked
9
Thank you for taking a look! However, I'm still having the same problem after creating a unique ID name. Consequentially TAB-2 now works and TAB-1 does not. Any suggestions?
Below contains the changes I made.

script change:
Expand|Select|Wrap|Line Numbers
  1. // Get all the div elements we need
  2. var x = document.getElementById('container');
  3. var divs = x.getElementsByTagName('div');
  4. var z = document.getElementById('containerz');
  5. var divs = z.getElementsByTagName('div');
body code change:
Expand|Select|Wrap|Line Numbers
  1. <div style="border: 1px solid #ddddff;" id="containerz">
Sep 26 '07 #3
acoder
16,027 Expert Mod 8TB
script change:
Expand|Select|Wrap|Line Numbers
  1. // Get all the div elements we need
  2. var x = document.getElementById('container');
  3. var divs = x.getElementsByTagName('div');
  4. var z = document.getElementById('containerz');
  5. var divs = z.getElementsByTagName('div');
Now you're overwriting the divs variable. Either use a different name or make another function and just pass the id of the container divs.
Sep 26 '07 #4
worked
9
Now you're overwriting the divs variable. Either use a different name or make another function and just pass the id of the container divs.
I understand you correctly, but can you post an example of what either/or might look like? Hate to be such a n00b... I really appreciate it!
Sep 26 '07 #5
acoder
16,027 Expert Mod 8TB
For example, you could have:
Expand|Select|Wrap|Line Numbers
  1. function initDiv(container)
  2. {
  3. var divs = x.getElementsByTagName('div');
  4. // Depending on classname, add an onclick or hide
  5. var el, i = divs.length;
  6. while ( i-- ){
  7. el = divs[i];
  8. if (el.className && /\bheading\b/.test(el.className)){
  9. el.onclick = showHide;
  10. } else if (el.className && /\bcontent\b/.test(el.className)){
  11. el.style.display = 'none';
  12. }
  13. }
  14. }
  15.  
then to call it:
Expand|Select|Wrap|Line Numbers
  1. var container = document.getElementById("container");
  2. initDiv(container);
Sep 26 '07 #6
worked
9
For example, you could have...
If you have time, would you happen to merge this script with the initial script I posted above? My arrangement(s) is not working for me... would need to see the complete composition to fully understand. Again, my n00bness and your help is compelling. Thanks again!
Sep 26 '07 #7
worked
9
Also, is there any easier way besides writing a new function for each tab, such as just adding unique ID names to the x variable? For example:

var x = document.getElementById('container', 'containers');


note: this above example also does not work.
Sep 26 '07 #8
acoder
16,027 Expert Mod 8TB
I made a mistake. In the example, replace x on line 3 with container:
Expand|Select|Wrap|Line Numbers
  1. var divs = container.getElementsByTagName('div');
Sep 27 '07 #9
acoder
16,027 Expert Mod 8TB
Also, is there any easier way besides writing a new function for each tab, such as just adding unique ID names to the x variable? For example:

var x = document.getElementById('container', 'containers');


note: this above example also does not work.
You don't need to write a new function for each tab. That one function has to be called for each tab with the container id.
Sep 27 '07 #10
worked
9
You don't need to write a new function for each tab. That one function has to be called for each tab with the container id.
Does this look right? Still not working...
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function showHide()
  3. {
  4. var idx = this.id.split('-')[1];
  5. var sp = document.getElementById('cont-'+idx);
  6. sp.style.display = ('' == sp.style.display)? 'none':'';
  7. }
  8.  
  9. function initDiv(container)
  10. {
  11. var divs = container.getElementsByTagName('div');
  12. // Depending on classname, add an onclick or hide
  13. var el, i = divs.length;
  14. while ( i-- ){
  15. el = divs[i];
  16. if (el.className && /\bheading\b/.test(el.className)){
  17. el.onclick = showHide;
  18. } else if (el.className && /\bcontent\b/.test(el.className)){
  19. el.style.display = 'none';
  20. }
  21. }
  22. }
  23. var container = document.getElementById("container");
  24. initDiv(container);
  25.  
  26. function initContent()
  27. {
  28. // Check that necessary features are supported
  29. if ( !document.getElementById
  30. || !document.getElementsByTagName
  31. || !document.body.style){
  32. return;
  33. }
  34. // Get all the div elements we need
  35. var x = document.getElementById('container');
  36. var divs = x.getElementsByTagName('div');
  37. // Depending on classname, add an onclick or hide
  38. var el, i = divs.length;
  39. while ( i-- ){
  40. el = divs[i];
  41. if (el.className && /\bheading\b/.test(el.className)){
  42. el.onclick = showHide;
  43. } else if (el.className && /\bcontent\b/.test(el.className)){
  44. el.style.display = 'none';
  45. }
  46. }
  47. }
  48. window.onload = initContent;
  49. </script>
Sep 27 '07 #11
acoder
16,027 Expert Mod 8TB
Lines 34 to 46 have been replaced by the initDiv function. Lines 23 and 24 need to go inside the initContent function where line 34 currently is.
Sep 28 '07 #12
worked
9
Thanks! Still not working however...

Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. function showHide()
  3. {
  4. var idx = this.id.split('-')[1];
  5. var sp = document.getElementById('cont-'+idx);
  6. sp.style.display = ('' == sp.style.display)? 'none':'';
  7. }
  8.  
  9. function initDiv(container)
  10. {
  11. var divs = container.getElementsByTagName('div');
  12. // Depending on classname, add an onclick or hide
  13. var el, i = divs.length;
  14. while ( i-- ){
  15. el = divs[i];
  16. if (el.className && /\bheading\b/.test(el.className)){
  17. el.onclick = showHide;
  18. } else if (el.className && /\bcontent\b/.test(el.className)){
  19. el.style.display = 'none';
  20. }
  21. }
  22. }
  23.  
  24. function initContent()
  25. {
  26. // Check that necessary features are supported
  27. if ( !document.getElementById
  28. || !document.getElementsByTagName
  29. || !document.body.style){
  30. return;
  31. }
  32. var container = document.getElementById("container");
  33. initDiv(container);
  34. }
  35. window.onload = initContent;
  36. </script>
Oct 2 '07 #13
acoder
16,027 Expert Mod 8TB
In initContent(), add the following two lines:
Expand|Select|Wrap|Line Numbers
  1. var container2 = document.getElementById("containerz");
  2. initDiv(container2);
This is for the second tab.
Oct 2 '07 #14
worked
9
Working! Thank you much sir!
Oct 2 '07 #15
acoder
16,027 Expert Mod 8TB
Glad to hear you got it working. Post again if you have more questions.
Oct 2 '07 #16

Post your reply

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

Similar topics

19 posts views Thread by benzwt | last post: by
19 posts views Thread by dmiller23462 | last post: by
2 posts views Thread by MOHSEN KASHANI | last post: by
4 posts views Thread by jerryyang_la1 | last post: by
5 posts views Thread by ali | last post: by
reply views Thread by devrayhaan | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.