The Accordion component uses the com.adobe.cq.wcm.core.components.models.Accordion Sling mode as its Use-object
Client Libraries
The component provides a core.wcm.components.accordion.v1 client library category that contains a recommended base CSS styling and JavaScript component. It should be added to a relevant site client library using the embed property.
It also provides a core.wcm.components.accordion.v1.editor editor client library category that includes JavaScript handling for dialog interaction. It is already included by its edit and policy dialogs.
BEM Description
BLOCK cmp-accordion
ELEMENT cmp-accordion__item
ELEMENT cmp-accordion__header
ELEMENT cmp-accordion__button
MOD cmp-accordion__button--expanded
ELEMENT cmp-accordion__title
ELEMENT cmp-accordion__icon
ELEMENT cmp-accordion__panel
MOD cmp-accordion__panel--expanded
MOD cmp-accordion__panel--hidden
JavaScript Data Attribute Bindings
Apply a data-cmp-is="accordion" attribute to the wrapper block to enable initialization of the JavaScript component..
The following attributes can be added to the same element to provide options:
data-cmp-single-expansion - if the attribute is present, forces a single panel to be expanded at a time.
The following attributes can be added to the accordion item (data-cmp-hook-accordion="item"):
data-cmp-expanded - if the attribute is present, indicates that the item should be initially expanded.
A hook attribute from the following should be added to the corresponding element so that the JavaScript is able to target it:
The following properties and child nodes are required in the proxy component to enable full editing functionality for the Accordion:
./cq:isContainer - set to true, marks the Accordion as a container component
./cq:editConfig - afterchilddelete, afterchildinsert and afterchildmove listeners should be provided via the edit configuration of the proxy. _cq_editConfig.xml contains the recommended actions and can be copied to the proxy component.
The default Accordion site Client Library provides a handler for message requests between the editor and the Accordion. If the built-in Client Library is not used, a message request handler should be registered:
new Granite.author.MessageChannel("cqauthor", window).subscribeRequestMessage("cmp.panelcontainer", function(message) {
if (message.data && message.data.type === "cmp-accordion" && message.data.id === myAccordionHTMLElement.dataset["cmpPanelcontainerId"]) {
if (message.data.operation === "navigate") {
// handle navigation
}
}
});
The handler should subscribe to a cmp.panelcontainer message that allows routing of a navigate operation to ensure that the UI component is updated when the active item is switched in the editor layer.
Extending the Components
Extending the components can be done in multiple ways depending on the needs of the brand component.
Use this approach if you do not have any required html markup changes or backend java changes. This will only update the title of the component, componentGroup and point to the resourceSuperType. Optionally can extend the description.
Change .content.xml file properties
sling:resourceSuperType to point to the Cheer.IOs component [required]
jcr:title - new Component title
componentGroup - Brand specific Group [required]
jcr:description - Helpful description
Use this approach if you need to update css classes or add data attributes and do not need to change the backend model, or potentially want to use a different model by retain all of the markup in the component-tmpl.html (Component Template) markup.
Follow steps in Extend the Component - Basic
Extend the file i.e. extend-example-option2.html
Update file with new properties
Update the html file with desired changes
The component template is usually named component-tmpl.html this file contains the html markup. Update this file if you need to change the html structure of the component.
Follow Steps in Extend Component Basic
Extend the file component.html to point to the new component-tmpl.html file
Extend the file i.e. component-tmpl.html
Update file with new markup
Use this approach if you need to change the Sling Model to update the backend logic.
Files that will need to be added when extending:
Follow Steps in Extend Component - Basic
Java Interface - this will implement the model with the new methods (if needed)
Sling Model - this will implement the Java Interface from step 1 and leverage the sling delegation pattern to override the original methods
The component.html file to match the new component name
It is possible to extend more than just the component.html file, if necessary any file that is resourceSupertyped can be extend for example if something needs added to the dialog.
This gives us the flexibility to change our classes or add attributes easily. Say I want to add new javascript I can easily target a different data attribute to trigger my javascript.
Configuration Properties
Policy Properties
The following configuration properties are used:
./allowedHeadingElements - the heading elements (h2 - h6, h1 is omitted for SEO reasons) that are allowed to be selected in the edit dialog.
./headingElement - the default heading element (h2 - h6, h1 is omitted for SEO reasons) to use for the accordion headers.
It is also possible to define the allowed components for the Accordion.
Policy Configuration Visual
Edit Dialog Properties
The following properties are written to JCR for this Accordion component and are expected to be available as Resource properties:
./singleExpansion - true if one panel should be forced to be expanded at a time, false otherwise.
./expandedItems - defines the names of the items that are expanded by default.
./headingElement - defines the heading element to use for the accordion headers (h2 - h6).
The edit dialog also allows editing of Accordion items (adding, removing, naming, re-ordering).
Edit Dialog Visual
Component Configuration Visual - Author
Published Visual Example
Note: Styles may be different. CSS Styles have been added to the Component Library. Therefore, Styling will be necessary to achieve results
Below is the Raw Out of the Box Style of the Accordion. No Styles apply