Expand / Collapse FIELDSET

BlueG

New Member

Join Date: Oct 2008
Posts: 1

Expand / Collapse FIELDSET

Oct 10 '08, 01:16 PM

I wrote simple code for expandable/collapsable fieldsets. You can try it yourselves:

Code:

<!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=UTF-8" />
<title>Test</title>

<style type="text/css">
<!--
a { color:blue; cursor:pointer; }
-->
</style>
<script type="text/javascript">
function constructCollapsableFieldsets() 
{
	var allFsets = document.getElementsByTagName('fieldset');
    var fset = null;
	for (var i=0; i<allFsets.length; i++)
	{
	    fset = allFsets[i];
		if(fset.attributes['collapsed']!=null)
		    constructCollapsableFieldset(fset, fset.attributes['collapsed'].value);
	}
}

//for collapsable fieldset:
function constructCollapsableFieldset(fset, collapsed)
{
	//main content:
	var divContent = fset.getElementsByTagName('div')[0];
	if (divContent == null)
	    return;
	    
	if (collapsed == 'true')
		divContent.style.display = 'none';
	
	//+/- ahref:
	var ahrefText = getAHrefForToogle(collapsed);

	//legend:
	var legend = fset.getElementsByTagName('legend')[0];
	if (legend != null)
	    legend.innerHTML = ahrefText + legend.innerHTML;
	else
	    fset.innerHTML = '<legend>' + ahrefText + '</legend>' + fset.innerHTML;
}

function getAHrefForToogle(collapsed)
{
    var ahrefText = "<a onClick='toogleFieldset(this.parentNode.parentNode);' style='text-decoration: none;'>";
    ahrefText = ahrefText + getExpanderItem(collapsed) + "</a>&nbsp;";
    return ahrefText;
}

function getExpanderItem(collapsed)
{
	var ecChar;
	if (collapsed=='true')
		ecChar='+';
	else
		ecChar='-';
    
    return ecChar;
}

function toogleFieldset(fset)
{
	var ahref = fset.getElementsByTagName('a')[0];
	var div = fset.getElementsByTagName('div')[0];

	if (div.style.display != "none")
	{
		ahref.innerHTML=getExpanderItem('true');
		div.style.display = 'none';
	}
	else
	{
		ahref.innerHTML=getExpanderItem('false');
		div.style.display = '';
	}
}
//-->
</script>
</head>

<body onLoad="constructCollapsableFieldsets();">

<fieldset collapsed="true">
    <legend>Bububu</legend>
    <div>
	    This is collapsable fieldset with caption (legend).
	    Fieldset is initially collapsed.
    </div>
</fieldset>
<br />
<fieldset collapsed="false">
    <div>
	    This is collapsable fieldset with no caption (legend).
	    Fieldset is initially expanded.
    </div>
</fieldset>
<br />
<fieldset>
<legend>Look here</legend>
<div>
    This fieldset is not collapsable.. 
    To set it collapseble is needed to type
    &lt;fieldset collapsed="false" ...
    or &lt;fieldset collapsed="true" ...
</div>
</fieldset>
</body>
</html>

Tags: fieldset dhtml

Konerak

New Member

Join Date: Apr 2009

Posts: 1
#2

Apr 30 '09, 12:52 PM

Not bad. A few hints if I may:

* try using classes, not attributes. This will allowed the document to be validated for HTML/javascript. eg class="fieldset _collapsed" : )

* try using unobtrusive javascript, a seperate .JS file with all functions in one object.

* if there is no inner DIV, let your javascript create it, instead of returning. Saves the programmer from having to add a silly DIV each time. Or just always create one, if that's easier.

Nice work tho!
Comment

Expand / Collapse FIELDSET

Expand / Collapse FIELDSET

Comment