Regarding Core Accordion Component

[sakethchandra02]

Hi, I have a use case where I want to add a check box to the accordion component and upon checking that checkbox, I want to add an image field to each of the accordion entry. Is there any approach to this? Basically I have a use case of using 2 types of accordions. One the normal one and the other with the image, Based on author's choice I will render html but the problem is with constructing the dialog to accommodate this. Any suggestion on how this can be done will be really very helpful to me.

[kaikubad]

Hi @sakethchandra02 ,
It seems possible. Here I am sharing a draft. Here checkbox click is not added. You have to add javascript for checkbox click function. I can also help there if needed. Here is the component example of accordion which will have image and checkbox on dialog

.content.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
    cq:isContainer="true"
    jcr:primaryType="cq:Component"
    jcr:title="Accordion"
    sling:resourceSuperType="core/wcm/components/accordion/v1/accordion"
    componentGroup="Content Structure"
    imageDelegate="core/wcm/components/image/v2/image"/>

cq:dialog sample:

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:granite="http://www.adobe.com/jcr/granite/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Accordion"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="[core.wcm.components.commons.editor.dialog.childreneditor.v1,core.wcm.components.accordion.v1.editor]"
    helpPath="https://www.adobe.com/go/aem_cmp_accordion_v1"
    trackingFeature="core-components:accordion:v1">
    <content
        granite:class="cmp-accordion__editor"
        jcr:primaryType="nt:unstructured">
        <items jcr:primaryType="nt:unstructured">
            <tabs jcr:primaryType="nt:unstructured">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:orderBefore="cq:styles"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        maximized="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <image
                                                jcr:primaryType="nt:unstructured"
                                                jcr:title="Image"
                                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                                margin="{Boolean}true">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <columns
                                                        jcr:primaryType="nt:unstructured"
                                                        sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                                        margin="{Boolean}true">
                                                        <items jcr:primaryType="nt:unstructured">
                                                            <column
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/container">
                                                                <items jcr:primaryType="nt:unstructured">
                                                                    <file
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="cq/gui/components/authoring/dialog/fileupload"
                                                                        allowUpload="{Boolean}false"
                                                                        class="cq-droptarget"
                                                                        fieldLabel="Image Asset"
                                                                        fileNameParameter="./fileName"
                                                                        fileReferenceParameter="./fileReference"
                                                                        mimeTypes="[image/gif,image/jpeg,image/png,image/tiff,image/svg+xml]"
                                                                        name="./file"
                                                                        title="Upload Image Asset"/>
                                                                </items>
                                                            </column>
                                                        </items>
                                                    </columns>
                                                </items>
                                            </image>
                                            <yourcheckbox
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/checkbox"
                                                checked="{Boolean}true"
                                                fieldDescription="Inherit Image from page"
                                                name="./inheritImage"
                                                text="Inherit Image from page"
                                                uncheckedValue="{Boolean}false"
                                                value="{Boolean}true"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

 Here accordion is inherited from core component. checkbox and image browser added. You will need to modify the htl as you needed

[sakethchandra02]

Thanks a lot for spending time on my question but the use case here is to add image to every accordion element but not one image for the entire component. 

I would be needing an image field here for Accordion 1 and Accordion 2 when I check that checkbox. If I uncheck it, the image field shouldn't come for each accordion element.