471,891 Members | 1,908 Online
Bytes | Software Development & Data Engineering Community
Post +

Home Posts Topics Members FAQ

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

Nested Show Hide Div Form Elements

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 div information. I want a nested show hide element though. So when you click on "Do you have carpets to be cleaned?" Small Rooms & Medium Rooms appears (that I got working) But Then when you click on Small rooms or medium rooms i want the three lines of text to appear and disappear if clicked. (hide by default)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Beckwith Flooring Quote System</title>
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<style type="text/css">
.heading {
cursor: pointer;
font-family: helvetica, arial, sans-serif;
display: block;
font-size: 12px;
color: #000000;
background-color: #CCCCCC;
padding: 8px;
}
.content {
background-color: #FFFFFF;
padding-left:10px;
font-size: 12px;
color: #333333;
font-family: helvetica, arial, sans-serif;
padding-top: 5px;
padding-bottom: 5px;
clip: rect(auto,auto,auto,auto);
line-height: 10px;
}
</style>
<script type="text/javascript">
function showHide()
{
var idx = this.id.split('-')[1];
var sp = document.getElementById('cont-'+idx);
sp.style.display = ('' == sp.style.display)? 'none':'';
}

function initContent()
{
// Check that necessary features are supported
if ( !document.getElementById
|| !document.getElementsByTagName
|| !document.body.style){
return;
}
// Get all the div elements we need
var x = document.getElementById('container');
var divs = x.getElementsByTagName('div');
// Depending on classname, add an onclick or hide
var el, i = divs.length;
while ( i-- ){
el = divs[i];
if (el.className && /\bheading\b/.test(el.className)){
el.onclick = showHide;
} else if (el.className && /\bcontent\b/.test(el.className)){
el.style.display = 'none';
}
}
}
window.onload = initContent;
</script>
</head><body>
<div style="border: 1px solid #ddddff;" id="container">

<div class="heading" id="head-1">
Do you have <strong>Upholestry</strong> to be cleaned? </div>
<div class="content" id="cont-1"><br />
<input name="textfield3" type="text" value="0" size="3" maxlength="2" />
Sectional Sofa : 5 Piece <br />
<input name="textfield32" type="text" value="0" size="3" maxlength="2" />
Sectional Sofa : 6 Piece<br />
<br>
</div>

<div class="heading" id="head-2">
Do you have <strong>Carpets</strong> to be cleaned?</div>
<div class="content" id="cont-2"><br />

<input type="checkbox" name="checkbox" value="checkbox" />
<strong>Small Rooms</strong><br />
<input name="textfield32" type="text" value="0" size="3" maxlength="2" />
Rooms that need furniture moved?<br />
<input name="textfield32" type="text" value="0" size="3" maxlength="2" />
Rooms that need an open area cleaned?<br />
<input name="textfield32" type="text" value="0" size="3" maxlength="2" />
Rooms that need heavy duty cleaning? <br />
<input type="checkbox" name="checkbox2" value="checkbox" />
<strong>Medium Rooms</strong><br />
<input name="textfield322" type="text" value="0" size="3" maxlength="2" />
Rooms that need furniture moved?<br />
<input name="textfield322" type="text" value="0" size="3" maxlength="2" />
Rooms that need an open area cleaned?<br />
<input name="textfield322" type="text" value="0" size="3" maxlength="2" />
Rooms that need heavy duty cleaning?<br />
<br />
</div>

</body>
</html>


Second,

I found code tat does the show hide functionality with a check box. Works great but want it on hide by default. And will i be able nest this easily in the previos question?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>
</head>

<body>

<script type="text/javascript">

if( document.getElementById ) {
getElemById = function( id ) {
return document.getElementById( id );
}
} else if( document.all ) {
getElemById = function( id ) {
return document.all[ id ];
}
} else if( document.layers ) {
getElemById = function( id ) {
return document.layers[ id ];
}
}

function showhide( el, id) {
if ( el && el.style ) {
getElemById( id ).style.display = (el.checked)? 'none' : '';
}
}

</script>

Show or hide?<br>
Hide?
<input type="checkbox"
name="yesno"
onclick="showhide(this, 'dn');">

<div id="dn" class="noshow">
some elements to be hidden or shown depending on what
button is clicked</div>
</body>
</html>


Thanks so much!!!
Aug 18 '06 #1
1 16606
Just want to change this to HIDE by default

Expand|Select|Wrap|Line Numbers
  1.  
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"> 
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
  6. <title>Untitled Document</title>
  7. </head>
  8.  
  9. <body>
  10.  
  11. <script type="text/javascript">
  12.  
  13. if( document.getElementById ) {
  14. getElemById = function( id ) {
  15. return document.getElementById( id );
  16. }
  17. } else if( document.all ) {
  18. getElemById = function( id ) {
  19. return document.all[ id ];
  20. }
  21. } else if( document.layers ) {
  22. getElemById = function( id ) {
  23. return document.layers[ id ];
  24. }
  25. }
  26.  
  27. function showhide( el, id) {
  28. if ( el && el.style ) {
  29. getElemById( id ).style.display = (el.checked)? 'none' : '';
  30. }
  31. }
  32.  
  33. </script>
  34.  
  35.  
  36. <input
  37. name="yesno" type="checkbox"
  38. onclick="showhide(this, 'dn');" />
  39. Small Room
  40.  
  41.  
  42. <div id="dn" class="noshow">
  43. <input name="textfield32" type="text" value="0" size="3" maxlength="2" />
  44. Rooms that need furniture moved?<br />
  45. <input name="textfield32" type="text" value="0" size="3" maxlength="2" />
  46. Rooms that need an open area cleaned?<br />
  47. <input name="textfield32" type="text" value="0" size="3" maxlength="2" />
  48. Rooms that need heavy duty cleaning? <br />
  49. </div>
  50. </body>
  51. </html>
  52.  
Thanks
Aug 18 '06 #2

Post your reply

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

Similar topics

5 posts views Thread by horndude77 | last post: by
5 posts views Thread by Markus Ernst | 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 zermasroor | last post: by

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.