Expand Accordion

[JHMark]

Is it possible to expand/contract an accordion element dynamically?

[Dmitry Kozlov]

Sure, here is a sample:

$('#fd_accordion-0 > h3:eq(1)').click()

Please, replace the highlighted number with the index of the section which you need to collapse/expand.

[JHMark]

Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4

/* Style Definitions */ table.MsoNormalTable {mso-style-name:"Table Normal"; mso-tstyle-rowband-size:0; mso-tstyle-colband-size:0; mso-style-noshow:yes; mso-style-priority:99; mso-style-parent:""; mso-padding-alt:0in 5.4pt 0in 5.4pt; mso-para-margin:0in; mso-para-margin-bottom:.0001pt; mso-pagination:widow-orphan; font-size:10.0pt; font-family:"Times New Roman","serif";}

Thank you, but more specific requirement is below:

If answer to question A is “Yes”, expand the accordion.

If answer to question A is “No”, collapse the accordion.

Can I retrieve the current state of an accordion item?

[Dmitry Kozlov]

Please, set Mode property of the Accordion to SingleCollapsable in Forms Designer and put the following code into JS-editor:

Code: Select all

function toggleSection() {
	var section = $('#fd_accordion-0 > h3:eq(0)');
	if (fd.field('YesNo').value()) {
		if (!section.hasClass('ui-state-active')) {
			section.click();
		}
	} else {
		if (section.hasClass('ui-state-active')) {
			section.click();
		}
	}
}

fd.field('YesNo').change(toggleSection);

toggleSection();

Replace the highlighted text with the internal name of your Yes/No column.

[JHMark]

And can I do similar manipulation with tabs?

If Q1 = No, disable tab 1

If Q2 = No, disable tab 2

If Q3 = No, disable tab 3

If Q1 = Yes, enable tab 1

If Q2 = Yes, enable tab 2

If Q3 = Yes, enable tab 3

[Dmitry Kozlov]

Sure, here is a sample:

Code: Select all

function toggleTabs(){
	var disabledTabs = [];
	
	if (fd.field('Field1').value()) {
		disabledTabs.push(1);
	}
	
	if (fd.field('Field2').value()) {
		disabledTabs.push(2);
	}
	
	if (fd.field('Field3').value()) {
		disabledTabs.push(3);
	}
	
	$('#fd_tabcontrol-0').tabs('option', 'active', 0);
	$('#fd_tabcontrol-0').tabs('option', 'disabled', disabledTabs); 
}

fd.field('Field1').change(toggleTabs);
fd.field('Field2').change(toggleTabs);
fd.field('Field3').change(toggleTabs);

toggleTabs();

[JHMark]

Thank you Dmitry!

[Dan_C]

How about hiding a specific tab?

How can I reference a particular tab in the tab control? I would want to either add the css class .fields-to-hide to that specific tab or hide the specific tab some other way. I've only been able to disable a tab.

[Dmitry Kozlov]

Hi,

Please, find a sample in the following post:
http://spform.com/forms-designer- ... point-2010

[Dan_C]

Yes this has been useful, but it doesn't deal with tabs. I'd like to add the css .fields-to-hide (referenced in your blog) to a particular tab.