Javatpoint Logo
Javatpoint Logo

Framework7 Accordion/ Collapsible

Framework7 Accordion is a graphical control element which is displayed as a stacked list of items. You can expand or collapse an accordion to show the content associated with that accordion.

Accordion Layout

See how an accordion layout looks like:

Collapsible Layout

When you use single separate collapsible element, you need to omit the accordion-list wrapper element.

See the structure of collapsible layout:

Accordion List View

If you want to set Accordion List View, use "item-link" element instead of "accordion-toggle".

Classes used for Accordion in Framework7

Following is a list of classes used for Accordion in Framework7:

Index Class Description
1) accordion-list It is a class which contains a group of accordion items list. It is optional.
2) accordion-item It is a required class for single accordion item.
3) accordion-item-toggle It is a required class used to expand accordion item content.
4) accordion-item-content It is a required class used for hidden accordion item content.
5) accordion-item-expanded It is a single expanded accordion item.

JavaScript API for Accordion

JavaScript API are method used to open and close accordion programmatically. There are 3 JavaScript API methods:

  • myApp.accordionOpen(item): It is used to open accordion.
  • myApp.accordionClose(item): It is used to close accordion.
  • myApp.accordionToggle(item): It is used to toggle accordion.

Accordion Events

There are 4 events listed for Accordion in Framework7:

Index Event Description
1) open This event is fired when you open an animation.
2) opened This event is fired when the opening of an animation is completed.
3) close This event is fired when you close an animation.
4) closed This event is fired when the closing of an animation is completed.

Example

Test it Now

Output:

Framework7 Accordion
Next TopicFramework7 Cards




Please Share

facebook twitter google plus pinterest

Learn Latest Tutorials


B.Tech / MCA