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