How to expand by default for collapsible multifield when click Add new multifield?

[HOZI1]

My component in AEM 6.5 is using collapsible in multifield

But when I click the Add button, the newly added multifield is collapsed by default, but I want it to be expand by default like below:

This is my code, I have added the code <collapsed="{Boolean}false"> in collapsible, but is not working. Anyone can help?

<faresheetmultifield
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
    composite="{Boolean}true"
    fieldLabel="Fare Sheets">
    <field
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container"
        name="./resourcesMultifield">
        <items jcr:primaryType="nt:unstructured">
            <layout
                jcr:primaryType="nt:unstructured"
                jcr:title="Faresheets detail field to expand"
                sling:resourceType="granite/ui/components/foundation/layouts/collapsible"
                collapsed="{Boolean}false">
                <items jcr:primaryType="nt:unstructured">
                    <well
                        jcr:primaryType="nt:unstructured"
                        sling:resourceType="granite/ui/components/foundation/container">
                        <layout
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/layouts/well"/>
                        <items jcr:primaryType="nt:unstructured">
                            <documenttitle
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                fieldDescription="Entering Heading Description"
                                fieldLabel="Fare Sheets Title"
                                name="./documentTitle"
                                required="true"/>
                            <creationdate
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="/libs/granite/ui/components/coral/foundation/form/datepicker"
                                displayedFormat="DD-MM-YYYY"
                                emptyText="Date/Time"
                                fieldDescription="Enter the creation date of the document in format DD-MM-YYYY (Recommended Maximum Length : 10 characters)"
                                fieldLabel="Creation Date"
                                name="./creationDate"
                                required="true"
                                type="date"/>
                            <documentpath
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                fieldDescription="Browse document"
                                fieldLabel="Document Link"
                                name="./documentPath"
                                required="true"
                                rootPath="/content/dam/agent360"/>
                        </items>
                    </well>
                </items>
            </layout>
        </items>
    </field>
</faresheetmultifield>

[Ganthimathi_R]

Hi @HOZI1 

Please find the below thread which has the same kind of discussion. 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/collapsible-layout-collaps...

[HOZI1]

I have read that before, but the solution is to change style, I am not sure how can I change the style as we are not using any javascript on it.

[Manu_Mathew_]

@HOZI1 If you wish to use javascript on dialogs you could use authoring clientlibs and use granite-data attributes to target as well.

by using category cq.authoring.dialog or extraClientlibs.

few other ref. https://sourcedcode.com/blog/aem/what-are-aem-extraclientlibs

https://sourcedcode.com/blog/aem/adding-custom-client-library-for-aem-author-editor-touch-ui

[HOZI1]

@Manu_Mathew_ As mentioned earlier, I wish to apply the changes directly in the component without using any Javascript. Do you have solution for my posted question?

[PRATHYUSHA_VP]

Hi @HOZI1 

As per the documentation, there is no property we can set in dialog to expand by default. 

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/...

Thanks

[arunpatidar · Accepted solution]

Hi @PRATHYUSHA_VP , @HOZI1 

You can use accordion to achieve same

https://developer.adobe.com/experience-manager/reference-materials/6-5/granite-ui/api/jcr_root/libs/... 

+ myaccordion
  - sling:resourceType = "granite/ui/components/coral/foundation/accordion"
  + items
    + item1
      - jcr:title = "Item 1"
    + item2
      - jcr:title = "Item 2"
      + parentConfig
        - active = true

[kautuk_sahni]

@HOZI1 Did you find the suggestions helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!