Expand Accordion

Posted by JHMark - Jun 30 ’14 at 11:54

• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 4 months 11 days
  #1 by Dmitry Kozlov Jul 1 ’14 at 05:16

  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.

  link flag
• JHMark

  Member

  Member for: 9 years 8 months 16 days
  #2 by JHMark Jul 1 ’14 at 09:33

  [#1]: 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?

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 4 months 11 days
  #3 by Dmitry Kozlov Jul 2 ’14 at 07:32

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

  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.

  link flag
• JHMark

  Member

  Member for: 9 years 8 months 16 days
  #4 by JHMark Jul 2 ’14 at 11:21

  [#3]:

  [#3]: 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

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 4 months 11 days
  #5 by Dmitry Kozlov Jul 3 ’14 at 06:51

  [#4]: Sure, here is a sample:

  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();
  

  link flag
• JHMark

  Member

  Member for: 9 years 8 months 16 days
  #6 by JHMark Jul 3 ’14 at 08:54

  [#5]: Thank you Dmitry!

  link flag
• Dan_C

  Member

  Member for: 8 years 2 months 5 days
  #7 by Dan_C Dec 11 ’14 at 07:09

  [#5]: 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.

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 4 months 11 days
  #8 by Dmitry Kozlov Dec 12 ’14 at 04:36

  [#7]: Hi,

  Please, find a sample in the following post:

  http://formsdesigner.blogspot.com/2013/03/how-to-create-dynamic-forms-with-forms.html

  link flag
• Dan_C

  Member

  Member for: 8 years 2 months 5 days
  #9 by Dan_C Dec 12 ’14 at 12:39

  [#8]: 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.

  link flag
• 

  Dmitry Kozlov

  Admin

  Member for: 9 years 4 months 11 days
  #10 by Dmitry Kozlov Dec 12 ’14 at 01:57

  [#9]: Please, open the link from my previous message. In that article I described exactly your case, hiding a particular tab based on a field value.

  link flag

Show more messages