473,388 Members | 1,939 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,388 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.


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">
<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;
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;
<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){
// 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;
<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 />

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



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">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Untitled Document</title>


<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' : '';


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

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

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

Expand|Select|Wrap|Line Numbers
  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>
  9. <body>
  11. <script type="text/javascript">
  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. }
  27. function showhide( el, id) {
  28. if ( el && el.style ) {
  29. getElemById( id ).style.display = (el.checked)? 'none' : '';
  30. }
  31. }
  33. </script>
  36. <input
  37. name="yesno" type="checkbox"
  38. onclick="showhide(this, 'dn');" />
  39. Small Room
  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>
Aug 18 '06 #2

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

Similar topics

by: horndude77 | last post by:
Ok, this might be for a web designing group, but here's my problem. I'm trying to make a web page with tabs which you can navigate between without the page reloading. I have one set of tabs working...
by: Markus Ernst | last post by:
Hi I have a validation problem with a form and nested divs. I understand what the problem is, but I don't see how to fix it. This is my normal page structure, and it validates: <!DOCTYPE HTML...
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 {...
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)...
by: Andrew | last post by:
Hello, friends, We created a drop-down menu bar and a show/hide calendar web user controls mainly using javaScript and html. However, they both have the problem that they are not dispaly as...
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...
by: danep | last post by:
Hi all, On my site I have a section of code that resembles the following: <p id="gear" style="display: none;"> <p>test</p> </p> This renders fine in Firefox (that is, nothing is...
by: sharonrao123 | last post by:
hello all, I have a parent gridview company and in this one a nested gridview people, Is it possible to allow the user to select one row or multiple rows from the people gridview using a check box...
by: worked | last post by:
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...
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

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.