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

Nested Show Hide Div Form Elements

P: 2
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
Share this Question
Share on Google+
1 Reply


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