472,378 Members | 1,610 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > hide / show form elements + tabs

Join Bytes to post your question to a community of 472,378 software developers and data experts.

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 3601
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

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

Similar topics

9
how to Hide TABLE rows by grouping them into DIV?
by: Wang, Jay | last post by:
I try to group several rows in a table into a div and show/hide them by click on a button somewhere with a javascript link. When clicked, the link will toggle the style of the div section's style...
Javascript
19
how to hide every <div> ?
by: benzwt | last post by:
I use the following function to hide a <div> named one. function hideObject() { if (ns4) { document.n1.visibility = "hide"; } else if (ie4) { document.all.style.visibility = "hidden"; }...
Javascript
19
JavaScript - HIDE/DISPLAY text boxes
by: dmiller23462 | last post by:
Hi guys....I have absolutely NO IDEA what I'm doing with Javascript but my end result is I need two text boxes to stay hidden until a particular option is selected....I've cobbled together the...
Javascript
2
Hide/show <div>
by: MOHSEN KASHANI | last post by:
Hi, I am trying to hide some form elements in a form by default and show/hide depending on which radio button is clicked. This is what I have but it is not working: <head> <style> ..noshow {...
Javascript
4
Hide / Show form Elements.
by: jerryyang_la1 | last post by:
I've found this script that allows be to hide/show form elements.. <script language="JavaScript"><!-- var toggle = true; function show(object) { if (document.layers && document.layers)...
Javascript
6
Is there a way to either disable or hide tab pages??
by: Siv | last post by:
Hi, I have a form with a TabControl on it, I have 6 tabs across the top of the page. What I'd like to do is have all but the first and second tab visible when the app starts and then as the user...
Visual Basic .NET
1
Nested Show Hide Div Form Elements
by: asilverpeach | last post by:
Hey Guys! Found some great scripts here on this topic but have to make to changes to the code that I can't seem to figure out. First, In the following code clicking on the headers shows the...
Javascript
3
hide/unhide data with variable numbers of fields
by: toodi4 | last post by:
I'm using a javascript that hides and unhides text based on a button click. It works great across static fields on a form. The problem I have is that I'm trying to hide and unhide various fields...
Javascript
5
Help about div hide/show
by: ali | last post by:
Hello every one i need you help regarding div hide and show. i am having a link like <a href="#" onClick="expandWin()">show/hide </a> <div id=showHide> </div> within div i have lots of...
Javascript
2
Benefits of Blockchain App Development for Enterprise Businesses
by: Kemmylinns12 | last post by:
Blockchain technology has emerged as a transformative force in the business world, offering unprecedented opportunities for innovation and efficiency. While initially associated with cryptocurrencies...
General
0
Basic concepts of WebLogic Admin training?
by: Naresh1 | last post by:
What is WebLogic Admin Training? WebLogic Admin Training is a specialized program designed to equip individuals with the skills and knowledge required to effectively administer and manage Oracle...
Oracle Database
0
Hyperconverged All-in-One Streaming Engine, ushering in new age for distributed database
by: antdb | last post by:
Ⅰ. Advantage of AntDB: hyper-convergence + streaming processing engine In the overall architecture, a new "hyper-convergence" concept was proposed, which integrated multiple engines and...
General
0
hi
by: WisdomUfot | last post by:
It's an interesting question you've got about how Gmail hides the HTTP referrer when a link in an email is clicked. While I don't have the specific technical details, Gmail likely implements measures...
General
0
BLUEPANDA
Join our open community on Discord to learn programming, SEO, and marketing
by: BLUEPANDA | last post by:
At BluePanda Dev, we're passionate about building high-quality software and sharing our knowledge with the community. That's why we've created a SaaS starter kit that's not only easy to use but also...
General
0
Mastering Python: A Versatile Programming Language for All
by: Rahul1995seven | last post by:
Introduction: In the realm of programming languages, Python has emerged as a powerhouse. With its simplicity, versatility, and robustness, Python has gained popularity among beginners and experts...
General
2
Problems to capture mouse_down event on a control within a form with lots of controls
by: Ricardo de Mila | last post by:
Dear people, good afternoon... I have a form in msAccess with lots of controls and a specific routine must be triggered if the mouse_down event happens in any control. Than I need to discover what...
Microsoft Access / VBA
1
Datasheet Form, iterate through records
by: Johno34 | last post by:
I have this click event on my form. It speaks to a Datasheet Subform Private Sub Command260_Click() Dim r As DAO.Recordset Set r = Form_frmABCD.Form.RecordsetClone r.MoveFirst Do If...
Microsoft Access / VBA
0
DizelArs
Handling .click() in the Safari browser
by: DizelArs | last post by:
Hi all) Faced with a problem, element.click() event doesn't work in Safari browser. Tried various tricks like emulating touch event through a function: let clickEvent = new Event('click', {...
Javascript

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2023
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!