CollapseHTML
(version 1.3)

Easily Add Expanding and Collapsing Sections to Your Web Pages

 Use Frontpage, Dreamweaver, Word for Windows, or any editor that can produce HTML files, to create web pages with expanding and collapsing sections.

When you see a right arrow icon , click on it to expand a section.
(To see this page with all sections fully expanded, or if you are NOT using Internet Explorer, click here.)
 

Note: If you have already downloaded the freeware installation file "CollapseHTMLv1-3s.msi"  see the "How to Get and Install CollapseHTML" section below for important installation instructions.

.SC WHAT CollapseHTML DOES

CollapseHTML lets you create web pages that have expandable/collapsible sections.

For example, you can create web pages that have sections that are hidden by default, but that expand when the right arrow below is clicked:

Clicking here will expand a hidden section

When a user clicks on the arrow, the hidden (or "collapsed" or "folded") section appears:

For example, you can create web pages that have sections that are hidden by default, but that expand when the right arrow is clicked:

Clicking here will expand a hidden section
 Here is the initially hidden section that appears.  The section can be of any length, it can include graphics, and it can be re-collapsed by clicking the icon below.

An actual working example is given below.

Note that Microsoft Frontpage only supports the creation of collapsible outlines -- not expanding and collapsing sections (sometimes also called "folding text").   CollapseHTML  allows you to easily create collapsing sections in web pages that you have created with Word, Frontpage, Dreamweaver, or any editor that can produce HTML files.  The sections that are to be collapsed can include any valid HTML code, including both text and graphics, and the sections can be of any size. 

Expanding and collapsing sections in web pages are particularly useful to keep your web pages well organized and user-friendly.  The user does not have to navigate through multiple links (clicking on links, and then clicking the browser Back button multiple times).   Instead, users can easily get more information about a specific topic by simply expanding a section.

A collapsed section of text will be indicated with a right arrow "" icon and, optionally, a section title.   The icon will change to a down arrow "" icon  when the text is expanded.  Clicking on the down arrow will re-collapse the expanded section.  

Also, when a section is expanded, at the bottom of the expanded section will be an up arrow icon, "".  Clicking on the up arrow will re-collapse the expanded section above it.

.EC
.SC HOW CollapseHTML WORKS

To include expanding and collapsing sections in your webpage, just surround the sections you want to be initially collapsed with the CollapseHTML section markup commands .SC (start collapse) and .EC (end collapse).  Then run CollapseHTML on this file, and an output file will be created.  When the output file is viewed with Internet Explorer, it will have expanding and collapsing sections.

CollapseHTML uses a Cascading Style Sheet (CSS) to produce the expanded (unfolded) and collapsed (folded) sections when the web page is viewed by a CSS-compatible browser (i.e., Internet Explorer). 

The output of the program is an html file that can only be viewed properly with Internet Explorer 4.0 and above.  The output files cannot be viewed properly with Netscape or other web browsers that do not support Cascading Style Sheets.  All collapsed text will be fully expanded (viewable).

EXAMPLE

To properly view this example, you must be using Internet Explorer (version 4 or above), or another CSS enabled web browser.

First, let's look at a sample input file.  Click on:  sample.htm

To process this file to create an HTML file with expanding / collapsing sections,  we would open CollapseHTML and select our input file, sample.htm.  CollapseHTML then produces an output file named "sample_c.htm".

To view the resulting output file, click:  sample_c.htm

After you have viewed each file, click the "Back" button on your browser to return here. 

Note that the small graphics files (the arrows) are copied to the directory of the target file.

The user can replace the arrows with graphics of their own choice.  Simply replace the graphics files: rightarr.gif, downarr.gif and uparr.gif in the CollapseHTML folder.

The output file (in the case above, sample_c.htm) cannot be edited with Frontpage, Word, Dreamweaver, etc., because these editors cannot correctly render Cascading Style Sheets.  Thus, the original HTML file (e.g., sample.htm) should be kept for future editing, and the processed file (sample_c.htm) is the file to be linked to and uploaded to your web hosting service.   Or, in some situations, it may be preferable to have two versions of your website: one with collapsible sections and one without (for those who may prefer a fully expanded format, or are not using a CSS compatible web browser).   You may sometimes wish to provide links to both types of files, or, have two sub-webs -- one with expandable sections and the other without.

The full version of the program (available for $19.50) will optionally traverse an entire website (directory tree) and run the collapse program on all of the HTML files.  You can create all of the output files in the same directory tree, or create a copy of the entire directory with both the original and the output files. If you choose the latter option, you will have two copies of your website -- a source website directory tree for editing of HTML files and a copy of that website -- the "target" directory tree with the html files that have been processed by CollapseHTML.exe.   You can then upload the target directory tree to your web hosting service (or, upload both webs, if you wish). 

You will want to check your links to the files in your website to make sure that they point to the processed files (e.g., "sample_c.htm"), not the source files for editing (e.g., "sample.htm").  Or, you may wish to provide links to both files.

.SC HOW TO GET AND INSTALL CollapseHTML

DOWNLOAD THE FREEWARE VERSION, OR PURCHASE THE FULL VERSION

DOWNLOAD THE FREEWARE VERSION

The freeware version (processes one HTML file at a time, and has an input file size limit of 30k) is free:

   Download CollapseHTMLv1-3s.msi for Windows XP (note: it is not compatible with Win98).
 

IMPORTANT NSTALLATION INSTRUCTIONS: 

Once you have downloaded the file, click on:  Start / Run / Browse

Go to the folder where you downloaded the file. 

Click on "Files of Type" and set it to: All.

Select the downloaded program: CollapseHTMLv1-3s.msi 
(it is a Microsoft .NET installation file) and click Open.

If you have trouble running the installation program, install the latest .NET Microsoft service packs (via Windows Update on your computer or the Microsoft's Windows Update website).  Or,  install the Microsoft .NET Framework from the Microsoft .NET download page.

PURCHASE THE FULL VERSION

Purchase the full, unrestricted version of the program for $19.50 (click on the Paypal icon below).  The  full version has no input file size limitations, and, optionally, will automatically process all of the HTML files in your website directory tree.

The full version of the program will be emailed to you.

For questions or comments about the program, contact:  memills@gmail.com

.EC

.SC KNOWN LIMITATIONS

CollapseHTML does not run on Windows 98. 

It is not possible to create an expanding section inside a table or list.

After inserting the CollapseHTML markup commands with your HTML editor, always search for and view each of these markup commands in the HTML source code.  Each of the .SC and .EC commands must on their own line in the pure html text file without any other surrounding tags.  If you want a section title to be on the same line as the arrow, there can't be any  tags in between the .SC and the following line with the section title.

Known Issues when using FrontPage

 

How to get a section title to appear on the same line as the arrow.

As noted above,  if you want a section title to be on the same line as the arrow, there can't be any  tags around it.   FrontPage automatically inserts paragraph tags.  View the file as HTML and remove these tags to get the section title to appear on the same line.

If a blank area is left when expanded section is re-collapsed.

Frontpage may sometimes insert "section" html tags (apparently without asking!).  If an expanded section will not re-collapse, edit your source HTML file with Frontpage, and click on the HTML tab at the bottom of the window.  Do a search for the following line, and delete it (note: the values of "width" and "height" in your file will likely be different).

<div class="Section1" style="width: 863; height: 1441">

Then, search for the closing section tag:

</div>

Delete this line as well.   Check to see if there are any other section tags like this, and remove the ones that are causing problems.

The above HTML code creates a problem  because that section will always have a height of 1441 pixels (in the above example), whether or not it is collapsed.

Once you have made the needed deletions, save the file, and the click the "Normal" tab to continue editing the file.   After you run CollapseHTML.exe again on the file, the section will re-collapse when the processed file is viewed with Internet Explorer.

Note:

In the output file, CollapseHTML creates similar HTML lines that look like this:

<DIV ID="layer2" style="position:relative;height:1;overflow:hidden">

</DIV>

Be sure not to delete these lines in the target file(s). You can tell the difference between the two because the Frontpage tags are lowercase ("div") and CollapseHTML's tags are uppercase ("DIV").   In addition, you should not, in general, edit the HTML code of any of the target files that have been processed with CollapseHTML.exe.  Edit only the source files.

If the section title (for a expanding/collapsing section) does not appear following the right arrow:

Edit the HTML code by hand so the lines between the .SC and .EC look like this:

 

<html>
<head> ... </head>

<body>...

.SC
Section Title (All title information must be on this line, including HTML font tags)

All the collapsible
html is here
.EC

</body>

</html>

 

**NOTE** - make sure there are no paragraph tags (<p> </p>) on the line containing the title.
 

For questions or technical support, contact:  memills@gmail.com

.EC