Expand Accordion

rss

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

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

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 3 months 28 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.

  • JHMark
    Member
    Member for: 6 years 8 months 3 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?

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 3 months 28 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.

  • JHMark
    Member
    Member for: 6 years 8 months 3 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

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 3 months 28 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();
    
  • JHMark
    Member
    Member for: 6 years 8 months 3 days
    #6 by JHMark Jul 3 ’14 at 08:54

    [#5]: Thank you Dmitry!

  • Dan_C
    Member
    Member for: 5 years 1 month 20 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.

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 3 months 28 days
    #8 by Dmitry Kozlov Dec 12 ’14 at 04:36
  • Dan_C
    Member
    Member for: 5 years 1 month 20 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.

  • Dmitry Kozlov
    Dmitry Kozlov
    Admin
    Member for: 6 years 3 months 28 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.

Displaying 1 to 10 of 15 messages
Previous12