Show/Hide Accordion

Forms SharePoint Online
1

Hide Accordion with multiple SPO fields contained in Accordion. I have reviewed the documentation but cannot get the function to work.

2

Hello @shedev,

Could you please share the code you are using to hide Accordion container?

3

I know this is incorrect, but these are the only notes I kept. I have since removed the code. I want to hide or show an accordion + all of its contents (SP fields and FD elements) based on the value of the "exam" drop-down choice. I have another case where I want to use a y/n choice to show/hide an accordion in the same way.

fd.spRendered(function() {

function enableOrDisableBIMC1() {
    if (fd.field('exam').value == 'BIM') {
        // Show the tab number BIMC1, in our case BIM
        fd.container('Accordion9').$children[1].disabled = false;
    } else {
        // Hide the tab number 1, in our case Resolved
        fd.container('Accordion9').$children[1].disabled = true;
    }
}

});

4

@shedev.

Please see the code example below.

Make sure that the internal names of the fields and controls match the names in the code.

Note that the count of Accordion tabs starts from 0.
image

To show/hide an 'Accordion' tab based on Yes/No field value use the following code in if statment.
fd.field('Yes_x002f_no').value

Code example to show/hide the Accordion tab based on the value in the dropdown field

fd.spRendered(function() {

    function showHideAccordion() {
        if (fd.field('exam').value == 'BIM') {
            // Enable the First Tab
            fd.container('Accordion0').$children[0].disabled = false;
			//Open the First Tab
			fd.container('Accordion0').$children[0].open = true;
        } else {
            // Disable the First Tab
            fd.container('Accordion0').$children[0].disabled = true;
			//Close the First Tab
			fd.container('Accordion0').$children[0].open = false;
        }
    }

    // Calling showHideAccordion when the user changes the field
    fd.field('exam').$on('change',showHideAccordion);

    // Calling showHideAccordion on form loading
    showHideAccordion();

});
1 Like
5

Hi @shedev.

You can use jquery to hide/show fields, controls as well as containers.

$(fd.container('Accordion0').$el).show(); // to show Accordian0
$(fd.container('Accordion0').$el).hide(); // to hide Accordian0

Stormanh

2 Likes
6

Building on this concept, I am updating this code and want to use OR operators to compare "choices".

This does not work, what am I missing?

fd.spRendered(function() {

    function showHideAccordionCR1() {
        if (fd.field('Stage').value == 'Content Review 1' || 'Content Review 1 Done' || 'Content Review 2' || 'Content Review Done 2') {
// Enable the First Tab
		fd.container('Accordion13').$children[0].disabled = false;
        } else {
// Disable the First Tab
		fd.container('Accordion13').$children[0].disabled = true;

        }
    }

// Calling showHideAccordion when the user changes the field
    fd.field('exam').$on('change',showHideAccordionCR1);

// Calling showHideAccordion on form loading
    showHideAccordionCR1();

});
7

Hello @shedev,

The correct syntax for the OR operators is (x == 5 || y == 5). You must update the condition like so:

if (fd.field('Stage').value == 'Content Review 1' ||  fd.field('Stage').value == 'Content Review 1 Done' ||  fd.field('Stage').value == 'Content Review 2')