Web Components Expansion Panel Overview

The Ignite UI for Web Components Expansion Panel is a lightweight accordion component which can be rendered in two states - collapsed or expanded. The expansion panel can be toggled using mouse click, or keyboard interactions.

Web Components Expansion Panel Example

import { defineComponents, IgcExpansionPanelComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ExpansionPanelUsage.css';

defineComponents(IgcExpansionPanelComponent, IgcIconComponent);
export class ExpansionPanelUsage {
	constructor() {
	}
}

new ExpansionPanelUsage();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Usage</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />
  </head>

  <body>
    <div id="root">
      <div class="container sample" style="align-items: center;">
        <igc-expansion-panel>
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
          and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
          to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
          are easy to train to basic or advanced obedience standards.</span>
        </igc-expansion-panel>
      </div>
    </div>

    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel{
    width: 100%;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Like this sample? Get access to our complete Ignite UI for Web Components toolkit and start building your own apps in minutes. Download it for free.

Usage

First, you need to install the Ignite UI for Web Components by running the following command:

npm install igniteui-webcomponents
cmd

Before using the IgcExpansionPanelComponent, you need to register it as follows:

import {defineComponents, IgcExpansionPanelComponent} from 'igniteui-webcomponents';

defineComponents(IgcExpansionPanelComponent);
ts

For a complete introduction to the Ignite UI for Web Components, read the Getting Started topic.

The simplest way to start using the IgcExpansionPanelComponent is as follows:

<igc-expansion-panel>
    <div slot="title">Golden Retriever</div>
    <div slot="subTitle">Medium-large gun dog</div>
    <div>
        <p>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
        and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
        to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
        are easy to train to basic or advanced obedience standards.</p>
    </div>
</igc-expansion-panel>
html

Binding to events

The Expansion Panel component raises the following events:

igcClosed - Raised when the expansion panel is collapsed
igcOpened - Raised when the expansion panel is expanded
igcClosing - Raised when the expansion panel starts collapsing
igcOpening - Raised when the expansion panel starts expanding

The following sample demonstrates how we can add some logic to our component to make it show/hide the subtitle depending on the current state of the panel.

We can do this by binding to the igcOpened and igcClosed event emitters:

import { defineComponents, IgcExpansionPanelComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ExpansionPanelPropertiesAndEvents.css';

defineComponents(IgcExpansionPanelComponent, IgcIconComponent);
export class ExpansionPanelPropertiesAndEvents {
    private panel: IgcExpansionPanelComponent;
    private firedEventSpan: HTMLSpanElement;
    private subtitle: HTMLElement | null;
    private timeout!: NodeJS.Timeout;

    constructor() {
        this.panel = document.getElementById("exp-panel") as IgcExpansionPanelComponent;
        this.firedEventSpan = document.getElementById("fired-event") as HTMLSpanElement;
        this.subtitle = document.querySelector("[slot='subtitle']");

        this.panel.addEventListener("igcOpened", this.handleExpansionPanelEvents.bind(this));
        this.panel.addEventListener("igcClosed", this.handleExpansionPanelEvents.bind(this));
    }

    public handleExpansionPanelEvents(ev: CustomEvent) {
        if(this.subtitle){
            if(ev.type === "igcOpened"){
                this.subtitle.style.display = 'none';
            }
            if(ev.type === "igcClosed"){
                this.subtitle.style.display = 'block';
            }
        }

        clearTimeout(this.timeout!);

        this.firedEventSpan.textContent = ev.type + " event fired!";
        this.firedEventSpan.style.display = 'block';
        this.timeout = setTimeout(() => {
            this.firedEventSpan.style.display = 'none';
        }, 2000);
    }
}

new ExpansionPanelPropertiesAndEvents();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Properties and Events</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample" style="align-items: center;">
        <igc-expansion-panel id="exp-panel">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
          and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
          to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
          are easy to train to basic or advanced obedience standards.
          </span>
        </igc-expansion-panel>
        <span id="fired-event"></span>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel{
    width: 100%;
    height: 300px;
}

span#fired-event {
    background-color: rgba(0,0,0,0.5);
    border-radius: 26px;
    padding: 1rem 1.5rem;
    color:white;
    display: none;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Component Customization

The IgcExpansionPanelComponent control allows all sorts of content to be added inside of its body. It can render input, charts and even other expansion panels!

The IgcExpansionPanelComponent allows for easy customization of the header through the exposed title, subTitle and indicator slots.

Configuring the position of the expansion indicator can be done through the indicatorPosition property of the Expansion Panel. The possible options are start, end or none.

The next code sample demonstrates how to configure the component's button to go on the right side.

import { defineComponents, IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent } from "igniteui-webcomponents";
import "igniteui-webcomponents/themes/light/bootstrap.css";
import "./ExpansionPanelCustomization.css";

defineComponents(IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent);
export class ExpansionPanelCustomization {
    private panel: IgcExpansionPanelComponent;
    private indicator: HTMLElement | null;

    constructor() {
        this.panel = document.getElementById("exp-panel") as IgcExpansionPanelComponent;
        this.indicator = document.querySelector("[slot='indicator']");

        this.panel.addEventListener("igcOpened", this.handleExpansionPanelEvents.bind(this));
        this.panel.addEventListener("igcClosed", this.handleExpansionPanelEvents.bind(this));
    }

    public handleExpansionPanelEvents(ev: CustomEvent) {
        if (this.indicator) {
            if (ev.type === "igcOpened") {
                this.indicator.textContent = "Show less";
            }
            if (ev.type === "igcClosed") {
                this.indicator.textContent = "Show more";
            }
        }
    }
}

new ExpansionPanelCustomization();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Customization</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-expansion-panel id="exp-panel" indicator-position="end">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <div slot="indicator">Show more</div>
          <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
          and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
          to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
          are easy to train to basic or advanced obedience standards.</span>
          <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="outlined" target="_blank">Read more</igc-button>
        </igc-expansion-panel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel {
    max-width: 500px;
    min-width: 300px;
    width: 100%;
    border: 1px solid rgba(171, 171, 171, 0.3);
    padding: 0;
}

igc-button {
    display: flex;
    margin-top: 16px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

The Ignite UI for Web Components Expansion Panel keyboard navigation is compliant with W3C accessibility standards and convenient to use.

Key Combinations

Alt + ↓ - expands the focused panel
Alt + ↑ - collapses the focused panel
Space/Enter - toggle the expansion state of the focused panel

Styling

The IgcExpansionPanelComponent component exposes several CSS parts, giving you full control over its style:

Name	Description
`header`	The container of the expansion indicator, title and subtitle.
`title`	The title container.
`subtitle`	The subtitle container.
`indicator`	The indicator container.
`content`	The expansion panel's content wrapper.

igc-expansion-panel {
  background-color: var(--ig-secondary-900);
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base) {
  color: var(--ig-secondary-900-contrast);
}

igc-button::part(base)::before {
  background-color: var(--ig-warn-500);
}

igc-expansion-panel::part(indicator) {
  color: var(--ig-warn-500);
}

igc-expansion-panel::part(header) {
  background-color: var(--ig-secondary-900);
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
  color: var(--ig-warn-500);
}
css

import { defineComponents, IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent } from 'igniteui-webcomponents';
import 'igniteui-webcomponents/themes/light/bootstrap.css';
import './ExpansionPanelStyling.css';

defineComponents(IgcExpansionPanelComponent, IgcButtonComponent, IgcIconComponent);
export class ExpansionPanelStyling {
	constructor() {
	}
}

new ExpansionPanelStyling();
ts

<!DOCTYPE html>
<html>
  <head>
    <title>Expansion Panel Styling</title>
    <meta charset="UTF-8" />

    <link rel="shortcut icon" href="https://static.infragistics.com/xplatform/images/browsers/wc.png" >
    <link rel="stylesheet" href="https://static.infragistics.com/xplatform/css/samples/shared.v8.css" type="text/css" />

  </head>

  <body>
    <div id="root">
      <div class="container sample">
        <igc-expansion-panel indicator-position="end">
          <h1 slot="title">Golden Retriever</h1>
          <h3 slot="subtitle">Medium-large gun dog</h3>
          <img height="100" src="https://i.ibb.co/6ZdY7cn/Untitled-design-3.png" alt="">
          <span>The Golden Retriever is a medium-large gun dog that retrieves shot waterfowl, such as ducks
          and upland game birds, during hunting and shooting parties.[3] The name "retriever" refers to the breed's ability
          to retrieve shot game undamaged due to their soft mouth. Golden retrievers have an instinctive love of water, and
          are easy to train to basic or advanced obedience standards.</span>
          <igc-button href="https://en.wikipedia.org/wiki/Golden_Retriever" variant="contained" target="_blank">Read more</igc-button>
        </igc-expansion-panel>
      </div>
    </div>
    <!-- This script is needed only for parcel and it will be excluded for webpack -->
    <% if (false) { %><script src="src/index.ts"></script><% } %>

  </body>
</html>
html

igc-expansion-panel {
    width: 500px;
    background-color: #18203b;
    color: white;
    border-radius: 8px;
}

igc-button::part(base){
    color: #18203b;
}

igc-button::part(base)::before {
    background-color: #ffd351;
}

igc-expansion-panel::part(indicator) {
    color: #ffd351;
}

igc-expansion-panel::part(header) {
    background-color: #18203b;
}

igc-expansion-panel::part(title),
igc-expansion-panel::part(subtitle) {
    color: #ffd351;
}

igc-button {
    display: flex;
    margin-top: 16px;
}

a {
    text-decoration: none;
}

img {
    width: 100%;
    margin-bottom: 8px;
    border-radius: 8px;
}
css

/* shared styles are loaded from: */
/* https://static.infragistics.com/xplatform/css/samples */css

Web Components Expansion Panel Overview

Web Components Expansion Panel Example

Usage

Binding to events

Component Customization

Keyboard Navigation

Styling

API References

Additional Resources