Skip to main content
sreenu539
sreenu539
Level 7
October 5, 2022
Question

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

  • October 5, 2022
  • 1 reply
  • 993 views

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/content/jcr_root/apps/core/wcm/components/accordion/v1/accordion/clientlibs/site/js/accordion.js

 

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

arunpatidar
Community Advisor
arunpatidarCommunity Advisor
Community Advisor
October 6, 2022

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.

 

Arun Patidar
    sreenu539
    sreenu539Author
    Level 7
    October 6, 2022

    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

      Terms & ConditionsAccessibility statement

      Loading footer...