First, we capture the event into the srcElement variable. This gives us an object that was clicked. Then, we see if this object is a member of the "Twisty" class. If not, the click happened somewhere else on the page and we ignore it here (if there was an href, that'll still happen). Assuming that we did click on a twisty, we get the ID of what was clicked ("Cat" + @Text(@DocNumber)). If you notice, the <div> tag that was hidden under this category follows the same naming convention except that "Top" is appended to the end. So, we get a handle to that <div> tag by building its name and then going to the block through Internet Explorer's document.all syntax.

After we have a handle to the <div> tag, we check to see if that <div> tag is hidden or if it's being shown. If it's hidden (style.display == "none") then we want to show it. To show it, clear its display value. Then we want to change the image from a twisty pointing to the right to one pointing down (collapse.gif). This mimics the Notes functionality. To do this, change the source of the image. Of course, first make sure it's actually an image, which it better be.

Otherwise, if the <div> tag is being shown, we want to hide the <div> tag and change the twisty to the one pointing to the right (expand.gif). This is just the opposite of the code used to show the block.

That JavaScript should go into the JSHeader section in your R5 client. The only other thing we need now is to capture clicks on the page. To do this, simply add a line of JavaScript after the function: document.onclick = doOutline.

This tells the browser that whenever the mouse is clicked, run the "doOutline" function (the function we just wrote). Note that this line of JavaScript is not in any function. We want that line to execute when the page loads.

That's it. Give it a try and see how it works. You should be able to expand and collapse all the categories you want (you can have multiple categories expanded at the same time, unlike the Domino default view functionality) without having to go back to the server.

That's probably enough information for you to wrap your arms around right now. In part two of this series, we'll get more advanced and add a second category. Stay tuned.

Matt Holthe is the lead developer for Breaking Par, a company specializing in Domino development for small and mid-sized businesses. He's a Principal CLP application developer for Domino R4 and R5. He can be reached via email at mattholthe@breakingpar.com.