Page 1 of 2
Expand Accordion
Posted: 30 Jun 2014
by JHMark
Is it possible to expand/contract an accordion element dynamically?
Re: Expand Accordion
Posted: 01 Jul 2014
by 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.
Re: Expand Accordion
Posted: 01 Jul 2014
by 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?
Re: Expand Accordion
Posted: 02 Jul 2014
by 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.
Re: Expand Accordion
Posted: 02 Jul 2014
by 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
Re: Expand Accordion
Posted: 03 Jul 2014
by 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();
Re: Expand Accordion
Posted: 03 Jul 2014
by JHMark
Thank you Dmitry!
Re: Expand Accordion
Posted: 11 Dec 2014
by 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.
Re: Expand Accordion
Posted: 12 Dec 2014
by Dmitry Kozlov
Hi,
Please, find a sample in the following post:
http://spform.com/forms-designer- ... point-2010
Re: Expand Accordion
Posted: 12 Dec 2014
by 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.