Accordion / Collapsible

    Common Accordion layout could be treat as the following:

    Where

    • - list of accordion items set. Optional class
      • accordion-item-opened - single opened accordion item

    Collapsible Layout

    If you use list view as accordion you may use “item-link” element instead of “accordion-toggle”:

    Example

    Accordion also has a JavaScript API that allows you to open and close them programmatically. Lets look at some Accordion App methods:

    • item - HTMLElement or string (with CSS Selector) of accordion-item element (
      ). Required

    app.accordion.close(el) - close specified accordion item

    app.accordion.toggle(el) - toggle specified accordion item

    • item - HTMLElement or string (with CSS Selector) of accordion-item element (
      ). Required

    Accordion Events

    App Events

    EventArgumentsDescription
    accordionBeforeOpen(el, prevent)Event will be triggered right before accordion content starts its opening animation. prevent contains function that will prevent accordion from opening when called
    accordionOpen(el)Event will be triggered when accordion content starts its opening animation
    accordionOpened(el)Event will be triggered after accordion content completes its opening animation
    accordionBeforeClose(el, prevent)Event will be triggered right before accordion content starts its closing animation. prevent contains function that will prevent accordion from closing when called
    accordionClose(el)Event will be triggered when accordion content starts its closing animation
    accordionClosed(el)Event will be triggered after accordion content completes its closing animation