How To Toggle Tab Visibility Based On Another Tab

Jared Johnson, 01 December 2012

When customizing a form in Microsoft Dynamics CRM 2011 I had a requirement to have a tab appear to actually be a part of the tab above it. This is easy to achieve visually by hiding the label but this façade quickly disintegrates once you close the first tab. To have the second tab open and close at the same time as the first tab we can use JavaScript.

This function will set the display state (open/closed) of the tab passed into the tabTwo parameter to the display state of the tab passed into the tabOne parameter. 

To use this function you need to add it to a JavaScript file, and upload this as a web resource. Then add this resource to the Form Libraries section in the Form properties dialog.

Now double click on the first tab, and go to Events. From here you can add an event for TabStateChange. In the handler properties window that appears choose the JavaScript library you uploaded earlier in the Library drop down, then enter the function you created (Test.expandCollapseTab) in the function textbox. Then enter the name of the first tab and the second tab in parenthesis, separated by a comma in the parameter textbox.

 

Now when the first tab is opened/closed the second tab will open and close with it. This can be useful for showing and hiding related sections, or the function can be edited to instead close the other tab when one is opened if you wish only one tab to be open at a time.