Expand / Collapse FIELDSET

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>

Oct 10 '08 #1

Subscribe Post Reply

16367

Konerak

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!

Apr 30 '09 #2

Similar topics

Expand/Collapse DIVS

by: James Hurrell | last post by:

Hi, I'm using the following javascript function to expand and collapse portions of text in a web page (targeted at IE5.5 and above): function doExpand(paraNum,arrowNum) { if...

Javascript

expand and collapse all

by: peter | last post by:

I use the click-to-expand menu at http://javascript.internet.com/navigation/click-to-expand-menu.html This works fine, but is there a way to expand or collapse all the menus? An example of how...

Javascript

expand / collapse all with this script

by: Randy Starkey | last post by:

Hi, Is there a way to expand and collapse all if I have multiple implementations of this script on a single page? The script works well individually. Thanks! --Randy Starkey ---

Javascript

Expand and Collapse

by: Jenny | last post by:

My codebehind file contains a lot of sub's. Is there a fast way to expand and collapse them in the VisualStudio? It's really exhausting to collapse them all after opening the project in the...

ASP.NET

urgent please : treeview control expand collapse

by: Gönen EREN | last post by:

how can i collapse or expand a node of treeview control programmaticly? thanks.

ASP.NET

TreeView 2.0 Expand/Collapse Bug when Base Target not set to _self

by: Shadow Lynx | last post by:

When using ASP.NET 2.0's built-in TreeView on a page with <BASE target = "AnythingBut_Self"></BASE> in the HEAD, the expand/collapse buttons fail to function. The reason for this is that the...

ASP.NET

Expand/collapse blocks of divs in a page

by: sam | last post by:

Hi all, I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to use one click to expand/collapse all those in each block. But the code I came up with exapands all the divs in the...

Javascript

Treeview - single click expand/collapse with XMLDatasource

by: jim | last post by:

Hi, I have a TreeView control that sits on the MasterPage. All of my other webpages inherit from that Master Page. The Treeview receives it's data using an XMLDataSource that has it's DataFile...

ASP.NET

Help needed for a expand-collapse menu

by: Rabel | last post by:

I am not very good at javascript I mostly am a flash developer but I am trying to apply one of our old expanding menus to work for a new site but it doesn't collapse the way I need it to right now...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

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

Algorithms / Advanced Math

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

How to build RAID in BIOS?

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

Computer Hardware

Problem With Comparison Operator <=> in G++

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,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

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

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General