In this article I posted a solution to collapse/expand all sections on a Domino web page. However, there was one issue with it: it doesn’t work in Firefox, because Domino renders different html for sections in non-IE browsers.
Let’s start with a demonstration before explanation.
A little warning: the little twisty icons don’t show up in my demo page, because I cannot put the default Domino twisties where they should belong. This shouldn’t be a concern for you: if you copy/paste the source of that page in a Domino page and mark the page as html, this should work for you.
Why I made it
Apart from the IE-only restriction, it happens to be that yesterday I read another post on Notes.Net where somebody also had a problem with sections: (with his version of Domino) he couldn’t manage to create a section with a pass-thru table in it: the content of the section couldn’t be pass-thru-milized (is that a word? :-)).
At first, I wanted to help him by trying to reproduce the problem, but I didn’t have the issue overhere. So, as an alternative, I suggested to create his own pass-thru sections. And it perfectly matches the article of yesterday, so yesterday evening I started coding a cross-browser solution for it.
How to use it
You’ll need the source of the demo page for the following procedure.
- Paste the expandCollapseSection function to your JS Header. Detection if a section is expanded is by looking at the used source file for the twisty. The expand twisty means the section is collapsed (Domino can be funny – they probably meant with the naming: with this icon you can expand stuff) and vice versa.
- Optionally also paste the expandAllSections and collapseAllSections functions if you want to be able to expand or collapse all sections with a button.
- Your content must be included in divs with “secx” as id, where x stands for number 1,2,3,… and an initial style=”display: none;” to hide the content.
- If you want the “expand/collapse all” buttons to work, the images require “twistyiconx” as id.
- I also used some make-up (styles) to put everything in the right position and style the divs, see for yourself if this suits your needs or change it.
Pfjew! This started as a little comment in a Notes.Net post and ended up to be a lot bigger. I hope you do the cross-browser twist from now one!