Implementing expanding and collapsing response document rows is trivially easy in Lotus Notes. The applications for expanding and collapsing response document rows were unlimited and pretty much every Lotus Notes application that I wrote included this functionality. Expanding and collapsing response document rows allowed me to keep my user interface clean and simple at the top level and yet still give the user access to further detail on demand. This is powerful and intuitive stuff.

The world changes however, and when the Web came along I stopped doing Lotus Notes client development entirely and switched to the Web browser as the client for all my software. I stuck with Lotus Domino as the server but left the Notes Client behind. Sadly, abandoning the Notes Client also meant abandoning some of the Notes Client's more powerful features, including expanding and collapsing response document rows in Views.

Lotus has implemented a kind of workaround for collapsing and expanding categories on the Web, in which you can click on little blue triangles in the Web browser, triggering a query to the Domino server which returns a page with the appropriate row expanded out. I never liked this functionality much however. I didn't like the look of the views, and I didn't like the fact that the browser had to go and do a round trip to the Web server to get a new page just to expand a row out. I really didn't like the goofy little blue triangles either--you know the ones I mean.

Fast-forward to 2001, and I had a new Lotus Domino application to build, for which I wanted expanding and collapsing response document rows. I wanted them in a Web browser. I wanted them without a round trip to the Domino Web server. I wanted them without hokey little blue arrows. I wanted them to be fast. I wanted them to look cool. I wanted to provide a "show/hide all" option that would expand or collapse all rows. Didn't want much, did I?

The key to the puzzle
The key to expanding and collapsing response document rows is the fact that Internet Explorer is able to hide or display any HTML page element using the Cascading Style Sheets "display" property. To hide an HTML page element, you must first identify the HTML page element with an ID attribute and add a style sheet to your HTML page. The style sheet must include a "display" rule for the HTML element referred to by the ID. The word "block" means show, and "none" means hide. Here's a simple example: