override core accordion js at https://github.com/adobe/aem-core-wcm-components/blob/core.wcm.components.reactor-2.20.2/content/src/content/jcr_root/apps/core/wcm/components/accordion/v1/accordion/clientlibs/site/js/accordion.js

[sreenu539]

Hi All,

I am working on FAQ component which displays frequently asked questions as accordion items.

For this, I leveraged accordion rendering, js by having "html" similar to core wcm accordion.html. 

One need I have is : by default all accordion items needs to be in collapsed state. On expanding an accordion item, all other expanded items, if any, to be collapsed.

OTB core accordion js https://github.com/adobe/aem-core-wcm-components/blob/core.wcm.components.reactor-2.20.2/content/src...

doesn't have above implementation. It has by default display 'first' or 'selected' accordion item expanded.

Need to overwrite core accordion js. How to overwrite above js as this js not a editor clientlib.

Also, please let me know, if this seems I am over complicating / over engineering the solution by reusing core accordion css, js. I am ok to write custom html, css, js for this specific component to have its own accordion functionality.

NOTE: I chose custom component rather than accordion because FAQ component Use case is to pull set of content fragments matching different paths, cf model, tags and render "question", "answer" elements of each content fragment as "accordion item".

Here is generated html for FAQ component

<div class="faq aem-GridColumn aem-GridColumn--default--12">
<div id="faq-316066439" class="cmp-accordion" data-cmp-single-expansion="true">
    <div class="cmp-accordion__item" data-cmp-hook-accordion="item" id="faq-1961552645">
        <h3 class="cmp-accordion__header">
            <button id="faq-1961552645-button" class="cmp-accordion__button" aria-controls="faq-1961552645-panel" data-cmp-hook-accordion="button" aria-expanded="false">
                <span class="cmp-accordion__title"><p>question cfone</p>
</span>
                <span class="cmp-accordion__icon"></span>
            </button>
        </h3>
        <div data-cmp-hook-accordion="panel" id="faq-1961552645-panel" class="cmp-accordion__panel cmp-accordion__panel--hidden" role="region" aria-labelledby="faq-1961552645-button" aria-hidden="true"><p>answer cfone</p>
</div>
    </div>

</div>
</div>

Thanks,

Sri

[arunpatidar]

Hi,

For me accordion does not opened the first item by default. I am using core components 2.20.8

I don't have any custom code. I am on vanilla instance and AEMaaCS.

[sreenu539]

Hi Arun,

by default first item will be opened , if author selects "single element expand" in styles tab in dialog.

otherwise, all items are collapsed. when you open several items, all will be in open.

Thanks,

sreeni