Quite often, when I was in high-school, I was dealing with learning and communication materials. The biggest challenge was mostly to classify information as relevant or not relevant at a specific point in time, and to establish a desired level of detail, tailored to my needs or my auditorium respectively. All of that come to me by means of courses and presentations over the intranet. The higher the ability to combine expandable content with hyperlinks, graphics and navigation buttons, the faster I was able to reach my goals.
To make the HTML part of my life easier, I managed to program a small tool in C# (well, if 'program' is not too much to say in my case) helping me to efficiently edit the HTML content, expanding and collapsing it my way, whenever I need to.
Working with the XCoHtml Tool
Normally, you should start by having the page you work on opened in some editor. At the beginning,
XCoHtml positions itself on the top-left corner of your screen. Begin by choosing the folder where you want the
In the popup dialog, select the destination path. Once you have decided on the right destination, click the icon next to the control showing the selected destination, in order for the necessary supporting files to be copied there.
The following files will be copied to the selected location:
- collapse.gif (the icon for the collapse command)
- expand.gif (the icon for the expand command)
Then select the path to the
HTML file you are currently working on, by clicking the HTML doc path label. This will allow the tool to check for ID duplicates further on.
As a general rule, whenever you give an alike command to the tool, the scripting to be added to the HTML page goes to the clipboard automatically. This allows you, once you return to the editor loaded with your page, to simply paste the content of the clipboard directly into the HTML document, as shown in the above image. The necessary
<script> tags with the correctly completed attributes go to the
<head> section (so, be sure you are positioned in the
<head> section when getting the content of the clipboard).
Now, click the Begin button on the tool and position the cursor within the HTML file where you want to start embedding the expandable/collapsible content. Paste the content of the clipboard (as you have already learned, the scripting is made available to you through the clipboard).
Immediately beneath the script block, write down whatever HTML code you need to be collapsed or expanded. Of course, that code might be already there; in that case you only need to place the scripting as mentioned.
End that HTML block with the termination script, by clicking the End button on the tool and pasting the received content through the clipboard at the desired position.
Here is an example with an HTML content detailed on two levels of relevance.
Click the expand icon to reach the first level of detail:
And now click the expand icon to reach the second level of detail:
Things can go as deep as you need or want. The HTML content to be expanded and collapsed is entirely up to you.
How Everything Works
The expand and collapse icons are brought as background images within
<span id=idTitle class='expand' onClick='ShowOrHide(idHiddenInfo, id)'> </span>
In the example above,
idTitle would be
'id_about'. The style used for showing the
expand icon is as follows:
while the style for the
collapse icon looks like:
A small observation here: a couple of a non-breaking spaces must be used with the
<span> tag, as the
width attribute for
<span> does not work in Firefox and Chrome browsers.
The caption for the expandable/collapsible content is governed by the following style:
font-family: Tahoma, Arial, Helvetica, sans-serif;
function ShowOrHide(idTarget, idCmd)
var whatToShowOrHide = document.getElementById(idTarget);
var clickedIcon = document.getElementById(idCmd);
if (clickedIcon.className == 'expand')
whatToShowOrHide.style.display = "block";
clickedIcon.className = "collapse";
whatToShowOrHide.style.display = "none";
clickedIcon.className = "expand";
To make some HTML content expandable/collapsible, that content must be guarded with a begin and an end specification.
begin specification is implemented through a call to the
TitleForHiddenStaff() followed by a call to the
function TitleForHiddenStaff(idTitle, title, idHiddenInfo)
document.write("<span id='" + idTitle +
"' class='expand' onClick='ShowOrHide(\"" + idHiddenInfo + "\", id)'>");
document.write("-non breakable spaces here-</span><span class='topic'>");
document.write("<table id='" + idHiddenStaff + "' style='display:none'>");
document.write("<tr><td width='19px'>-non breakable space-</td><td>");
end specification is implemented through a call to the
- The tool has been tested with:
- (Double) click the client area of
XCoHtml or press F1 when the tool has the focus to pop-up a quick reference guide for using the tool.
- Make sure you have saved your work in the HTML editor after pasting anything from the tool, so that the ID duplicate checking be done next time on the latest version of the HTML file.
- You can add using a script the expandable/collapsible content to your HTML page by calling the
AddHiddenStaff(staff) function, too.
- 25th June, 2010: Article posted