Wednesday, August 20, 2008

Creating Collapsible Sections

This is a nice space saver, especially for "crowded" forms. Would be even nicer if ms provided this out of the box. You can set the initial state of the section in the onload event.

function OnCrmPageLoad() {
/* false - collapsed, true - expanded */
//First Tab, Second Section, Expanded
//Second Tab, Second Section, Collapsed

function ConvertSection( tabIndex , sectionIndex , state ) {
var sec = document.getElementById( "tab" + tabIndex );
var td = sec.childNodes[0].rows[ sectionIndex ].cells[0].childNodes[0].rows[0].cells[0];
var secHTML = td.innerHTML;
state = (typeof(state) == "undefined")? false:!state;
var src = (state == false)? "/_imgs/tree/dashPlus.gif":"/_imgs/tree/dashMinus.gif";
td.innerHTML = "<NOBR style='VERTICAL-ALIGN: middle;cursor:hand' onclick='excoSection(this)'><IMG src='" + src + "' align='middle' /> " + td.innerHTML + "</NOBR>";
td.childNodes[0].childNodes[0].state = state;

/* Toggle SectionState */
function excoSection( sec ) {
sec = sec.childNodes[0];
sec.state = !sec.state;
sec.src = (sec.state)? "/_imgs/tree/dashMinus.gif":"/_imgs/tree/dashPlus.gif";
var display = (sec.state)? "inline" :"none";
var tblsec = sec.parentElement.parentElement.parentElement.parentElement;
for( var i =1 ; i < tblsec.rows.length ; i++ )
tblsec.rows[i].style.display = display;
//Expose the toggling function at the window level
this.excoSection = excoSection;



walkingKid said...

hi there,

when i've found these, i think this would be very interesting! but i can't put it working... :(

what i did was, puting the code in the onLoad form event, referencing to an external Js file(witch contains the other functions)

But i don't understand were do i've o put this code:

//Expose the toggling function at the window level
this.excoSection = excoSection;

what do you mean with "at the window level"

thanks in advance! and keep up the good job... you have here some very good funcionalities

Best Regards

Adi Katz said...

All the code should be either in the onload event (good for online and offline) OR in an external file (works only online).

When you put the code in the onload event then the code can not be called when you toggle the section (click on the + - sign) because the excoSection function resides inside the MS crm_load function.

In order to expose the excoSection function to the click event you need to add
this.excoSection = excoSection;
window.excoSection = excoSection;
to your code.

hope this makes more sense.

walkingKid said...

hello Adi,

thanks for the repply, now itmakes more sense and it's working fine! :D

thank you very much and keep the good job!

Mário Moreira

Anonymous said...

Thanks this is fantastic, I can't wait to try it out! But can you tell me: is there any way to alter the SECTION NAME or the COLOR in a similar manner? (For example, I want the button to work like this:

+ Step One: Create Order

Click it, show the section. Assume user selects a person and place. When they Save or collapse the section, I'd like to change the section name to:

+ Step 1: Order Created on (date) for (person) at (place)

And if I can change the color of the section, then I can have a series of these, and show the user their progress with the creation of the order...

Thanks for any (more) help you can provide!


Anonymous said...

Great code i really liked this. Is it possible to save the collapsed state and have it when you update the form?

Adi Katz said...

2 ways that comes in mind.

First one is replace the third (state) parameter with a function that returns a Boolean value based on a condition(s) i.e. if a field is not null then expand section otherwise collapse. You can also create a text field that holds an xml document with all collapsible sections state and retrieve then during onload.

Anonymous said...

Can anyone tell me how to change section name at on change event of any field?

Anonymous said...

Hi there. Great code. Any way to adapt it to hide a section on a tab completely based on an onload event?

Adi Katz said...

Put the code in the onload event and wrap the ConvertSection function with custom logic.

Here is a simple example which collapses the address section on the account if the accountnumber is null.

if( crmForm.accountnumber.DataValue == null )
ConvertSection( 0,1,false);

Does this answer your question?

Anonymous said...

got it, love it, thanks. big help for a newbie.

Withers said...
This comment has been removed by the author.
Balaji said...


Fantastic Code. Works Great. One problem. Make the section collapsed. And then try a Tab Sequence on the window. The tab Sequence goes from no where to everywhere. Any clue as to why this happens ?


Rich said...

I can't get this to work and I really want to!!

My code dies on the part that says:
td.childNodes[0].childNodes[0].state = state;

td.childNodes[0] doesn't have any children - so it blows up.

How come??

Felix said...

Great stuff! Thank you very much for this one.

sbudyak said...

Hello, Greate code!
It works 100% in account entity, but when i use it for the contacts entity - it doesn't work, i don't know what is a problem?

Anonymous said...


Recently done an upgrade from crm 4 to crm 2011 and this piece of code was used previously. Obviously crm2011 has collapsable tabs by default but not sections. This code is erroring on line

var td = sec.childNodes[0].rows[sectionIndex].cells[0].childNodes[0].rows[0].cells[0];

Is there an updated version of this code at all?