Accordion Container and Accordion Items

444 views

Accordion Container

An accordion is a block whose content opens and closes when you click (or hover) the title bar.
When you place a component, the following code is defined by default:

<c-accordion [alwaysOpen]=”true” data-comp-id=”accordion-container.1″ id=”accordion-container.1″>

It has no meaning on its own but serves as a vessel for the next accordion item.

Accordion Items

Defines the content to be displayed in the accordion block.
When placed, the following code will be defined by default.
Two components will be placed: [Accordion Item Header], which displays buttons, and [Container], which displays descriptions.

<c-accordion-item #item0=”cAccordionItem” [visible]=”true” data-comp-id=”accordion-item.1″ id=”accordion-item.1″>
<ng-template cTemplateId=”accordionHeaderTemplate”>
<button cAccordionButton (click)=”item0.toggleItem()” [collapsed]=”!item0.visible” data-comp-id=”accordion-item-header.1″>
<mat-label>
Accordion Button
</mat-label>
</button>
</template>
<ng-template cTemplateId=”accordionBodyTemplate”>
<c-container class=”accordion-body” data-comp-id=”c-container.1″></c-container>
</template>
</c-accordion-item>

Corresponds to the <c-accordion> tag.
In the initial state, multiple accordions are opened and closed at the same time.

<c-accordion-item #item0=”cAccordionItem” [visible]=”true” data-comp-id=”accordion-item.2″ id=”accordion-item.2″>
<ng-template cTemplateId=”accordionHeaderTemplate”>
<button cAccordionButton (click)=”item0.toggleItem()” [collapsed]=”!item0.visible” data-comp-id=”accordion-item-header.2″>

By making the red numbers for each accordion item unique, each accordion item will be able to move independently.

For more details on the Accordion, please use the below hyperlink.

Accordion Container and Accordion Items