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:

Section 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)

5 Comments

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

    Reply
  2. 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.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

− 3 = 6

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>