show/hide fieldset 1

WebRic · Nov 27, 2006

Hi all,

I have a section of a form that looks like this:

Code:

<fieldset class="hideme" onclick="endhide(this)">
<legend>Properties is less than 5 years old</legend>
<em>If the property is less than 5 years old, please 
enter the following</em>

<div>
<label class="left-label" for="developer">Name of developer</label>

	<input name="developer" type="text" class="inputbox"  id="developer"  />

</div>

<div>
	<label class="left-label" for="siteName">Site name &amp; phase</label>
 
	<input name="siteName" type="text" class="inputbox"  id="siteName"  />

</div>

<div>
	<label class="left-label" for="SiteRoad">Off site road name</label>
	
		<input name="SiteRoad" type="text" class="inputbox"  id="SiteRoad"  />
	
</div>

</fieldset>

I'd like to use javascript to initially hide this section then have a plus sign within the legend to show the fieldset. At the moment I'm having to use a click method on the actual fieldset, but I think I want to be able to run this off the child element <legend>

Here's the code I have so far:

Code:

<style type="text/css" media="all">
@import url(../styles/layout4.css);
fieldset.hideme {}

fieldset.hidemenow {border: none;}
fieldset.hidemenow div,
fieldset.hidemenow em {display: none;}

</style>

<script type="text/javascript">

document.getElementsByClassName = function(clsName){
    var retVal = new Array();
    var elements = document.getElementsByTagName("*");
    for(var i = 0;i < elements.length;i++){
        if(elements[i].className.indexOf(" ") >= 0){
            var classes = elements[i].className.split(" ");
            for(var j = 0;j < classes.length;j++){
                if(classes[j] == clsName)
                    retVal.push(elements[i]);
            }
        }
        else if(elements[i].className == clsName)
            retVal.push(elements[i]);
    }
    return retVal;
}

	window.onload = function starthide() 	{
		
		var hidefield = document.getElementsByClassName('hideme');
			for(i = 0; i < hidefield.length; i++) 	{
			
			hidefield[i].className = "hidemenow";
								}

						}	
	
function endhide(thefieldset) {
	
	thefieldset.className = "hideme";

} 

</script>

Any ideas how to do this?
Thanks,

R

kaht · Nov 27, 2006

I'd suggest putting all the content of your fieldset (excluding the legend) inside of a div container so that you can easily hide/show it. Here's an example (note the   thrown in at the end of the fieldset to ensure that the borders still appear even if the content is not shown:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "[URL unfurl="true"]http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">[/URL]
<html xmlns="[URL unfurl="true"]http://www.w3.org/1999/xhtml">[/URL]
<head>
<title>test</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">

function showHide(obj) {
   divObj = obj.parentElement.parentElement.getElementsByTagName("div")[0];
   divObj.className = (divObj.className == "hideMe") ? "showMe" : "hideMe";
   return false;
}

</script>

<style type="text/css">

div.hideMe {
   display:none;
}

div.showMe {
   display:block;
}

</style>
</head>
<body>
<form id="theForm" action="" method="post" onsubmit="">
   <fieldset>
      <legend>Blah blah blah <a href="#" onclick="return showHide(this)">Put your image here</a></legend>
      <div class="hideMe">
         <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi bibendum velit ut erat. Integer ultricies sapien quis eros. Nam placerat ipsum sed arcu. Donec vel leo. Ut tellus justo, lobortis in, scelerisque sed, dapibus sed, diam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer auctor elit id eros. Pellentesque dignissim molestie velit. Nullam pharetra dignissim velit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; In imperdiet porttitor odio. Aliquam at purus et justo laoreet molestie. Suspendisse rhoncus dolor sed massa. Sed vehicula orci non arcu. Aliquam volutpat tellus vitae tellus. Donec scelerisque eros non nulla. Maecenas dignissim, magna ac blandit dapibus, dui nisi convallis lectus, non posuere tellus tortor at lacus. Cras sed nisl sollicitudin nunc faucibus ornare. Nam fermentum, metus non dapibus pharetra, nibh odio fringilla ligula, a ullamcorper quam justo lacinia eros.</p>
         <p>Sed orci libero, tempor quis, vehicula egestas, ultrices quis, nibh. Cras rutrum viverra libero. Curabitur neque lectus, malesuada id, sollicitudin ut, iaculis quis, neque. Nunc eget nibh sed mi laoreet condimentum. Sed euismod rhoncus enim. Vestibulum sit amet purus ut ante sollicitudin euismod. Nulla faucibus, mauris vitae tristique tincidunt, leo lacus vulputate tortor, non cursus ante elit rhoncus turpis. Maecenas ligula ante, condimentum vitae, placerat nec, porttitor quis, purus. Phasellus tortor mi, luctus at, rhoncus eget, sollicitudin ut, eros. Suspendisse potenti. Pellentesque non velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Quisque aliquet enim sit amet lorem. Praesent magna mi, sollicitudin nec, egestas semper, vestibulum id, erat. Aliquam turpis nulla, suscipit pulvinar, viverra ac, faucibus eu, metus. Nullam ac tellus a velit feugiat tempus. Fusce sagittis. Aenean non justo. Nulla erat nisi, eleifend sit amet, porttitor quis, volutpat ut, purus.</p>
      </div>
      &nbsp;
   </fieldset>
</form>
</body>
</html>

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

show/hide fieldset 1

WebRic

Technical User

kaht

Programmer

Similar threads

Part and Inventory Search

Sponsor