Class DropdownToggle

constructor

• new DropdownToggle(
      button: string | HTMLElement,
      options?: DropdownOptions,
  ): DropdownToggle

  Parameters

  • button: string | HTMLElement
  • Optionaloptions: DropdownOptions

  Returns DropdownToggle

StaticDURATION_DEFAULT

StaticDURATION_REDUCED_MOTION

StaticEASE_DEFAULT

close

• close(instant?: boolean): Promise<void>

  Parameters

  • instant: boolean = false

  Returns Promise<void>

destroy

• destroy(): void

  Destroys the dropdown instance.

  This will:

  • Remove all event listeners
  • Immediately stop any animation on the dropdown item
  • Reset the markup to its initial state
  • Remove the instance from its group
  • Call the onDestroy callback

  Note: if you are using a custom animation, you may need to run additional cleanup code. This can be done by passing a custom onDestroy callback to the constructor.

  Returns void

isAnimating

• isAnimating(): boolean

  Returns boolean

isOpen

• isOpen(): boolean

  Returns boolean

open

• open(instant?: boolean, bypassGroup?: boolean): Promise<void>

  Parameters

  • instant: boolean = false
  • bypassGroup: boolean = false

  Returns Promise<void>

toggle

• toggle(): Promise<void>

  Returns Promise<void>

StaticcloseAllInGroup

• closeAllInGroup(group: string, currentInstance?: DropdownToggle): Promise<void>

  Parameters

  • group: string
  • OptionalcurrentInstance: DropdownToggle

  Returns Promise<void>

StaticisGroupAllClosed

• isGroupAllClosed(group: string): boolean

  Checks if all dropdowns in a given group are closed.

  Parameters

  • group: string

  Returns boolean

StaticisGroupAllOpen

• isGroupAllOpen(group: string): boolean

  Checks if all dropdowns in a given group are open.

  Parameters

  • group: string

  Returns boolean

StaticopenAllInGroup

• openAllInGroup(group: string): Promise<void>

  Parameters

  • group: string

  Returns Promise<void>

ReadonlyGROUP_CHANGE_EVENT_NAME

const dropdown = new DropdownToggle(button, {
  group: 'group-1',
});

window.addEventListener('DropdownToggle:group-change', (event: CustomEvent<GroupChangeEventDetail>) => {
  console.log(event.detail);
});
Copy