Expand or collapse accordion items on checkbox click in Accordion component

27 Apr 202412 minutes to read

By default, accordion items expand or collapse by clicking the accordion item header or clicking expand/collapse icon in accordion header.

You can also expand or collapse the accordion items through external button click. In the following example, when you change the checkbox provided then the accordion items will expand/collapse accordingly. This requirement can be achieved with the help of accordion’s click, expanding events, expandItem public method and checkbox’s change event.

app.component.html

<div class="control-section accordion-control-section">
    <div class="e-sample-resize-container">
      <!-- Render the Accoridon Component -->
      <ejs-accordion
        #element
        (expanding)="expanding($event)"
        (clicked)="onClick($event)"
      >
        <e-accordionitems>
          <e-accordionitem>
            <ng-template #header>
              <div class="ib">
                <ejs-checkbox
                  #checkbox1
                  (change)="changeHandler1()"
                ></ejs-checkbox>
              </div>
              <div class="ib">ASP.NET</div>
            </ng-template>
            <ng-template #content>
              <div>
                Microsoft ASP.NET is a set of technologies in the Microsoft .NET
                Framework for building Web applications and XML Web services.
                ASP.NET pages execute on the server and generate markup such as
                HTML, WML, or XML that is sent to a desktop or mobile browser.
                ASP.NET pages use a compiled,event-driven programming model that
                improves performance and enables the separation of application
                logic and user interface.
              </div>
            </ng-template>
          </e-accordionitem>
          <e-accordionitem>
            <ng-template #header>
              <div class="ib">
                <ejs-checkbox
                  #checkbox2
                  (change)="changeHandler2()"
                ></ejs-checkbox>
              </div>
              <div class="ib">ASP.NET MVC</div>
            </ng-template>
            <ng-template #content>
              <div>
                The Model-View-Controller (MVC) architectural pattern separates an
                application into three main components: the model, the view, and
                the controller. The ASP.NET MVC framework provides an alternative
                to the ASP.NET Web Forms pattern for creating Web applications.
                The ASP.NET MVC framework is a lightweight, highly testable
                presentation framework that (as with Web Forms-based applications)
                is integrated with existing ASP.NET features, such as master pages
                and membership-based authentication.
              </div>
            </ng-template>
          </e-accordionitem>
          <e-accordionitem>
            <ng-template #header>
              <div class="ib">
                <ejs-checkbox
                  #checkbox3
                  (change)="changeHandler3()"
                ></ejs-checkbox>
              </div>
              <div class="ib">JavaScript</div>
            </ng-template>
            <ng-template #content>
              <div>
                JavaScript (JS) is an interpreted computer programming language.It
                was originally implemented as part of web browsers so that
                client-side scripts could interact with the user, control the
                browser, communicate asynchronously, and alter the document
                content that was displayed.More recently, however, it has become
                common in both game development and the creation of desktop
                applications.
              </div>
            </ng-template>
          </e-accordionitem>
        </e-accordionitems>
      </ejs-accordion>
    </div>
  </div>

app.component.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule } from '@syncfusion/ej2-angular-navigations';
import { Component, ViewEncapsulation, Inject, ViewChild } from "@angular/core";
import {
  ExpandEventArgs,
  Accordion,
  AccordionClickArgs
} from "@syncfusion/ej2-navigations";
import { closest } from "@syncfusion/ej2-base";
import { AccordionComponent, AccordionItemModel } from "@syncfusion/ej2-angular-navigations";
import { CheckBoxComponent, CheckBoxModule } from "@syncfusion/ej2-angular-buttons";

@Component({
imports: [
         AccordionModule, CheckBoxModule
    ],


standalone: true,
  selector: "app-container",
  templateUrl: "./app.component.html"
})
export class AppComponent {
  @ViewChild("element") acrdnInstance?: AccordionComponent;
  @ViewChild("checkbox1") chk1Instance?: CheckBoxComponent;
  @ViewChild("checkbox2") chk2Instance?: CheckBoxComponent;
  @ViewChild("checkbox3") chk3Instance?: CheckBoxComponent;
  public clickEventArgs?: Event;
  public expanding(e: ExpandEventArgs) {
    if (this.clickEventArgs) {
      let header = closest(
        this.clickEventArgs.target as Element,
        ".e-acrdn-header"
      );
      let checkboxEle = closest(
        this.clickEventArgs.target as Element,
        ".e-checkbox-wrapper"
      );
      if (header && !checkboxEle) {
        e.cancel = true;
        return;
      }
    }
    let index = (this.acrdnInstance as AccordionComponent).items.indexOf(e.item as AccordionItemModel);
    if (index == 0 && !(this.chk1Instance as CheckBoxComponent).checked) {
      e.cancel = true;
      return;
    }
    if (index == 1 && !(this.chk2Instance as CheckBoxComponent).checked) {
      e.cancel = true;
      return;
    }
    if (index == 2 && !(this.chk3Instance as CheckBoxComponent).checked) {
      e.cancel = true;
      return;
    }
  }
  public onClick(e: any) {
    this.clickEventArgs = e.originalEvent;
  }
  public changeHandler1() {
    this.clickEventArgs = null as any;
    (this.acrdnInstance as AccordionComponent).expandItem(true, 0);
  }
  public changeHandler2() {
    this.clickEventArgs = null as any;
    (this.acrdnInstance as AccordionComponent).expandItem(true, 1);
  }
  public changeHandler3() {
    this.clickEventArgs = null as any;
    (this.acrdnInstance as AccordionComponent).expandItem(true, 2);
  }
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));