SharePoint accordion form

Question

Hello
I have the following code:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://spjsfiles.com/SharePoint%20JavaScripts/AccordionForSharePointForms/v2.0/AccordionForSharePointForms.js"></script>

<script type="text/javascript">

    var accConstructor = {
        sections: [{
            name: 'First section',
            fields: ['InMultipleSections', 'SectionOneText', 'Section1Choice'],
            mouseOver: 'This is the first section',
            sectionStyle: '',
            clickFunction: ''
            },

            {
                name: 'Second section',
                fields: ['InMultipleSections', 'Responsible', 'Section2Text'],
                mouseOver: 'This is the second section',
                sectionStyle: '',
                clickFunction: ''
            },

                {
                    name: 'Third section',
                    fields: ['InMultipleSections', 'Title'],
                    mouseOver: 'This is the third section',
                    sectionStyle: '',
                    clickFunction: ''
                },

                {
                    name: 'Forth section',
                    fields: ['InMultipleSections', 'Section3Multiline', 'Section3Choice'],
                    mouseOver: 'This is the forth section',
                    sectionStyle: '',
                    clickFunction: ''
                },

                {
                    name: 'Attachments',
                    fields: ['attachments'],
                    mouseOver: '',
                    sectionStyle: '',
                    clickFunction: ''
                }],

                settings:
                {
                    viewAllFields: { show: true,
                        position: 'bottom',
                        name: 'All fields',
                        mouseOver: 'This section shows all fields',
                        sectionStyle: '',
                        clickFunction: ''
                    },

                    orphanFields:
                    {
                        show: true,
                        name: 'Orphans',
                        mouseOver: 'All orphan fields',
                        sectionStyle: '',
                        clickFunction: ''
                    },

                    bgColor: '#8EB4E8',
                    hoverColor: '#FFF68F',
                    selectedColor: '#C6E2FF',
                    formBgColor: '#C6E2FF'
                },

                clickFunctionShared: 'clickFunctionShared(this)'
            };

            function clickFunctionShared(elm)
             {
                var acc = $(elm);
                
            }

            function secondSectionClick(elm)
             {
                var acc = $(elm);
                var arrOfFields = acc.attr('fields').split(',');
                alert("The fields included in the second section is these:n" + arrOfFields);
            }
                
                init_buildAccordionForm(accConstructor,'1');
</script>

here is the resulta:

thank you to help me if there are errors

Answer 1

Hi doss01,

If you want to display the list form fields under each of accordion sections, I suggest you can check the fileds property in the sections array to check if the field name in fields property matches the actual list field internal name.

Here is a detailed code demo about accordion form would be helpful:

accordion for SharePoint

Also here is demo about Jquery accordion Plugin for your reference:

Jquery Accordion

Thanks

Best Regards

---

TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [e-mail].

Answer 2

Hi Jerry Zy

I did the same example copy paste but the display does not match.

Thanks

Answer 3

Hi,

I suggest you can use Internet Explorer Developer Tool to check if there are some script error in the form.

Also, please check if the column name fields property, this property will specify the array of columns to show in the section.

More information:

Using the F12 Developer Tools to Debug JavaScript Errors 

Thanks

Best Regards

---

TechNet Community Support
Please remember to mark the replies as answers if they help, and unmark the answers if they provide no help. If you have feedback for TechNet Support, contact [e-mail].