Expand / Collapse FIELDSET

BlueG · #1 October 10th, 2008, 02:16 PM

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

Expand|Select|Wrap|Line Numbers

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

Konerak · #2 April 30th, 2009, 01: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!

Expand / Collapse FIELDSET

re: Expand / Collapse FIELDSET

/bytes/development

/bytes/it

/bytes/about