BizzyBee’s BizzyThoughts

Expand/collapse all sections in a document on the web

UPDATE: if you’re ready to put a little more effort in the implementation, this cross-browser solution is more suitable.

A post on Notes.Net inspired me today: somebody asked how you can expand/collapse all sections in a document on the web with the click of a button.

This is the code I came up with. Throw it in the JS Header of the page and call it with a button (here I used 2 separate functions for the expand and collapse, but it can’t be that hard to make it one button if desired).

function expandAllSections() {
  var sec=1;
  while (document.getElementById("cSec"+sec)!=null) {
    document.getElementById("cSec"+sec).style.display = "none";
    document.getElementById("xSec"+sec).style.display = "";
    sec=sec+1;
  }
}
function collapseAllSections() {
  var sec=1;
  while (document.getElementById("cSec"+sec)!=null) {
    document.getElementById("xSec"+sec).style.display = "none";
    document.getElementById("cSec"+sec).style.display = "";
    sec=sec+1;
  }
}

How does it work?

A section in Domino looks like this on the web:

Every section is 2 times present in the html source: a collapsed version (an empty span) and an expanded version (a span with the content), but only one is shown (therefor one of them has display: ‘none’ in it.

So, the first section exists twice: a section with id=csec1 (collapsed) and one with id=xsec1 (expanded). For every extra section in the document, Domino increases the index (so the next sessions are named xsec2 and csec2).

The code simply changes the display of the sections while there are still sections (while document.all[”cSec”+sec]!=null)

(2 votes, average: 5 out of 5)

 Loading ...

5 Responses to “Expand/collapse all sections in a document on the web”

1. Michelle S. says:
   November 6th, 2007 at 11:31 pm

   Isn’t “document.all” deprecated? Does this work if you use document.getElementById(”cSec”+sec)!=null instead?

2. martin.vereecken says:
   November 7th, 2007 at 9:20 am

   Hi Michelle,

   Thanks for your comment, you’re right about that, so I updated the script accordingly.

   In Internet Explorer my code did the job (document.all is not a problem for most browsers, but semantically it’s better to use getElementById), but Firefox is a different matter. I found that Domino threats sections in Firefox in a complete other way, it needs a server reload to display the section, instead of showing/hiding a div as in Internet Explorer.

   This is another weird Domino behaviour, especially because it could also work perfectly in Firefox :-S.

3. Fabio Barbieri says:
   December 10th, 2007 at 5:32 pm

   Look Here
   http://www.sbacode.com/pageTips.aspx?id=226&

4. Fabio Barbieri says:
   December 10th, 2007 at 5:34 pm

   Look Here:
   http://www.sbacode.com/pageTips.aspx?id=226&

5. Martin Vereecken says:
   December 10th, 2007 at 7:07 pm

   Hi Fabio,

   Thanks for the tip. On top of the article you’ll notice there was an update - a cross browser solution for this that does more or less the same: see http://www.bizzybee.be/2007/11/08/expandcollapse-sections-a-clientside-cross-browser-solution/

   Greetings,
   Martin

Leave a Reply