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

Hide / Show form elements + tabs

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


acoder
Expert Mod 15k+
P: 16,027
Welcome to TSDN!

The id must be unique. You have two divs with the id "container".
Sep 26 '07 #2

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

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

P: 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

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

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

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

P: 9
Working! Thank you much sir!
Oct 2 '07 #15

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