Collapsible sections in a web applications.
I can remember when Sections were first introduced to the Notes Client.
It was one of those oooooooooh moments that made upgrading a must. They
changed the way forms were designed, and made it possible to design a usable
form that contained a lot of data. Then web applications came along and
while sections could still be used, their functionality was reduced to
the point that it made little sense to do so.
Right now I am developing an application that has a form that contains
approximately 200 visible fields. Initially only a fraction of the fields
are visible, but as the form goes through it's 4 phases more fields are
revealed and although fields from the previous phases are no longer editable,
the data previously entered is visible. This means that by the time the
user opens the document to fill in the phase 4 fields she has to do a lot
of scrolling just to reach them.
I decided to reduce the scrolling and screen clutter by implementing web-based
collapsible sections. I did this using DHTML divs and spans along with
a little javascript. The first step was to create some passthru HTML that
included the name of the section. In this example the section header is
"Demographic Information". The code looks like this:
<div class="boxhead" onclick="ChangeState('DemoG')">Demographic
Information</div>
Not only does this code identify the section header but it also toggles
between a collapsed and expanded state each time the user clicks on the
section name. This is then followed with additional passthru HTML that
identifies the beginning of the collapsible area. For this I used a span:
<span class ="" id = "DemoG">
The span tag is followed by all the fields I want in the Demographic section
of the form. Immediately following the fields I have placed an end span
tag (</span>).
I have broken my form up into four sections. Each time the form is opened
whether for reading or editing, I want to expand only the section pertaining
to the current phase. I collapse the other sections by placing this code
in the onload event of the form:
var phase=document.forms[0].fd_ProjectPhase.value;
switch (phase){
case "SP2":
ChangeState("DemoG")
ChangeState("Step2")
break;
case "SP3":
ChangeState("DemoG")
ChangeState("Step2")
ChangeState("Step3")
break;
case "SP4":
ChangeState("DemoG")
ChangeState("Step2")
ChangeState("Step3")
ChangeState("Step4")
ChangeState("Step5")
break;
}
ChangeState is a little bit of javascript that I've placed in the form's
JS Header. It simply looks at the current state of the section and changes
it. By default the sections would be expanded when a document is loaded
in the browser, so calling ChangeState toggles the section's state to collapsed
without explicitly being asked to. The JS Header code looks like this:
function ChangeState(section){
document.forms[0].fd_ProcessOnLoad.value="Y"
if(document.getElementById){
var element = document.getElementById(section);
if(element.style.display
!= "none"){
element.style.display
= "none";
}else{
element.style.display = "block";
}
}
}
-