How to expand or collapse HTML 5 Accordion menu from code

3 mins read

What is HTML 5 Accordion menu

An accordion menu is a list with vertically aligned headers that can expand or collapse the content associated with it. The expand and collapse option provides an easy way to organize and access the content if you have large amount of content.

API for expand or collapse HTML 5 Accordion menu

The HTML 5 Accordion menu provides a public method expandItem for expanding or collapsing the specified Accordion item.

Parameter	Type	Description
isExpand	boolean	Boolean value that determines whether the pane is expanded or collapsed.
index (optional)	number	Number value that determines the pane to be expanded or collapsed. Index is optional parameter. Without specifying an index, all the HTML 5 Accordion panes can be expanded or collapsed based on the isExpand value.

Expanding specified item of HTML 5 Accordion menu

If you want to expand a specified item of Accordion, you need to set the isExpand parameter to true and specify the index of the corresponding accordion pane in index parameter. The index of the HTML 5 Accordion items is starting from 0. So, if you want to expand the first item of the HTML 5 Accordion menu set index to 0 as the following code.

accordionObj.expandItem(true, 0);

Collapsing specified item of HTML 5 Accordion menu

If you want to collapse a specified item of Accordion, set the isExpand parameter to false and specify index of the accordion pane in index parameter. The index of the HTML 5 Accordion items is starting from 0. So, if you want to collapse the second item of the HTML 5 Accordion menu, set index to 1 as the following code.

accordionObj.expandItem(false, 1);

Expanding all items of HTML 5 Accordion menu

If you want to expand all the items of the Accordion, you can only pass the isExpand parameter as true to the expandItem method as the following code.

accordionObj.expandItem(true);

Collapsing all items of HTML 5 Accordion menu

If you want to collapse all the items of the Accordion, you can only pass the isExpand parameter as false to the expandItem method as the following code.