JavaScript Expandable / Collapsible Panel Control






4.72/5 (50 votes)
This article describes how to create an Expandable / Collapsible Panel Control using JavaScript.

Introduction
JavaScript Expandable / Collapsible Panel Control
is a cross-browser JavaScript control.
Background
Frankly speaking, I'm inspired to develop this control from the Microsoft Web site. If you surf the Microsoft Web site, then you will find a beautiful Panel Control
at the right top corner of the default page. Some time ago, it had also smooth expand / collapse functionality but not now. In my Panel Control
I've implemented this smooth expand / collapse functionality through JavaScript animation.
Class

Panel
: It is a public
cross-browser JavaScript class.
Constructor
Panel Control
has the following constructor:
-
Panel(Arguments)
: The constructor of thePanel
class takes an argument of the typeObject Literal
. The definition of theargument Object Literal
is given below:var Args = { Base: _Base, //Base reference where ListBox to be displayed. HeaderText: _ HeaderText, // Header Text. Width: _Width, // Width of the Control. ClickEventHandler: _ClickEventHandler // Reference of the click event handler. };
Example:
var Args = { Base: document.getElementById('parent'), HeaderText: 'Items', Width: 200, ClickEventListener: OnClick };
In case you assign each
Property
of theargument Object Literal
equal tonull
, then eachproperty
will acquire its defaultvalue
.Properties
and their default values have been tabulated below:Property Default Value Base
document.documentElement
HeaderText
Header Text Width
200
ClickEventHandler
Anonymous Method
Methods
Panel Control
has the following public
methods:
InsertItem(Text, Value)
: Used to insert anPanel Item
. It takes two arguments:Text
: ItemText
Value
: ItemValue
GetItems()
: Used to get collection of allPanel Items
GetItem(Index)
: Used to get aPanel Item
at a givenItem index
. Returnsnull
in caseItem
isn't found. It takes oneargument
:Index
: ItemIndex
RemoveItems()
: Used todelete
all thePanel Items
. Returns number ofItems
deletedRemoveItem(Index)
: Used todelete
aPanel Item
at a givenItem index
. Returnstrue
on successful deletion, elsefalse
. It takes oneargument
Index
: ItemIndex
GetTotalItems()
: Used to get total number ofPanel Items
Contains(Index)
: Used to check whether aPanel Item
exists at a givenItem index
or not. Returnstrue
ifItem
exists, elsefalse
. It takes oneargument
:Index
: ItemIndex
Dispose()
: Used to destroyPanel object
Note: The Panel Item
is an Object
Literal and has the following definition:
var PItem = {
IsSelected: _IsSelected, // true/false.
Text: _Text, // Item Text.
Value: _Value, // Item Value.
};
Property
Panel Control
has only one property
:
Version
: Used to get the current version of thePanel Control
Event
Panel Control
has only one event
:
Click
: Fires when any onePanel Item
is clicked
The local anonymous method that responds to the click event
(i.e. event handler
) has the following signature:
var EventHandler = function(Sender, EventArgs) {}
Here, Sender
is the reference of the element (in this case, the Panel Item
) that raises the click event
and EventArgs
is a Object Literal
that contains necessary information regarding the event
. EventArgs Object Literal
has the following definition:
var EventArgs = {
Text: _Text, // Item Text.
Value: _Value, // Item Value.
};
Using the Control
Add the reference of the Panel.js file in your Web page:
<script type="text/javascript" src="JS/Panel.js"></script>
Create an div
element in the Web page.
<div id="parent"></div>
Now create a script
tag in the head
section of the Web page and put the following code in the window.onload event
as:
<script type="text/javascript">
var oPanel = null;
window.onload = function()
{
var Args = {
Base: document.getElementById('parent'),
HeaderText: 'Items',
Width: 200,
ClickEventListener: OnClick
};
oPanel = new Panel(Args);
oPanel.InsertItem('MSDN', 'Insert');
oPanel.InsertItem('HotMail', 'Delete');
oPanel.InsertItem('Yahoo', 'Update');
oPanel.InsertItem('Gmail', 'Cancel');
oPanel.InsertItem('Rediff', 'Truncate');
oPanel.InsertItem('AOL', 'Select');
oPanel.InsertItem('Hi5', 'Between');
} </script>
In the above code, first an argument Object Literal
with necessary properties has been created. Then Panel Control
has been instantiated. Finally some Panel Items
have been added to the Panel Object
. Don't forget the click event handler wire up in the argument Object Literal
as:
ClickEventListener: OnClick
Here, OnClick
is the reference of the click event handler that is created as a local anonymous method:
var OnClick = function(Sender, EventArgs)
{
//Code
}
Example:
var OnClick = function(Sender, EventArgs)
{
var Message = new Array();
Message.push('Text: ' + EventArgs.Text);
Message.push('Value: ' + EventArgs.Value);
document.getElementById('DivMessage').innerHTML = Message.join('<br />');
}
The above method will get called whenever you click on any one Panel Item
.
Invoke the Dispose
method in the window.onunload event
in order to destroy Panel Object
as:
window.onunload = function(){ oPanel.Dispose(); }
Conclusion
So this is the approach that I have adopted to develop Expandable / Collapsible Panel Control through JavaScript. Please report bugs, errors and suggestions to improve this control.
Browser Compatibility
I have tested this Panel Control on a number of Web browsers:
