Keyboard Navigation

28 Jun 20171 minute to read

You can use Keyboard shortcut keys as an alternative to the mouse in Accordion widget using allowKeyboardNavigation property. However, you will have to focus the control to enable the keyboard navigation. Accordion Widget allows you to perform all kind of actions using keyboard shortcuts.

List of Keyboard shortcut keys are shown below,

Shortcut Key Description
Access key + j Focuses into the accordion control
Up Moves to previous panel
Down Moves to next panel
Left Moves to previous panel
Right Moves to next panel
Home Moves to the first accordion panel
End Moves to the last accordion panel

Configure keyboard interaction

The following steps explains how to enable keyboard interaction for an Accordion widget.

In an HTML page, define a <div> element that is a container for Accordion widget and add the contents correspondingly.

  • HTML
  • <div id="accordion" style="width: 500px" ej-accordion e-allowkeyboardnavigation="true">    


    Need to set focus on Accordion component to access the keyboard shortcuts.