Foldable

The full stack CSS3 powered jQuery Accordion

Get it now!

Events

Event binding

jQuery event binding

Foldable events uses jQuery standard methods structure.

You can use .on(), .off() and .one().

Event names are namespaced with /* eventName */.foldable

// Please, substitute /* eventName */ with the name of the event

// jQuery .on()
$('#my-foldable').on('/* eventName */.foldable', ( event, /* params */ ) => {
    console.log('An event just happened')
})

// jQuery .one()
$('#my-foldable').one('/* eventName */.foldable', ( event, /* params */ ) => {
    console.log('An event just happened once!')
})

// jQuery .off()
$('#my-foldable').on('/* eventName */.foldable', ( event, /* params */ ) => {
    console.log('An event have just been removed!')
})

Vanilla Javascript event binding

Bind the events in Vanilla Javascript with the events .on(), .off() and .once().

In Vanilla Javascript is not necessary to namespace the event. Just use the name.

// Please, substitute /* eventName */ with the name of the event

const foldable = new Foldable('#my-foldable')

// .on()
foldable.on('/* eventName */', ( /* params */ ) => {
    console.log('An event just happened')
})

// .once()
foldable.once('/* eventName */', ( /* params */ ) => {
    console.log('An event just happened once!')
})

// .off()
foldable.on('/* eventName */', ( /* params */ ) => {
    console.log('An event have just been removed!')
})

Events demo

Interact with this accordion to see how events are triggered

Events

before-open

Fired when a group has just started to be opened

// jQuery
$foldable.on('before-open.foldable', ( event, foldableGroupInstance ) => {
    console.log(foldableGroupInstance)
})

// vanilla Javascript
foldable.on('before-open', foldableGroupInstance => {
    console.log(foldableGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableGroupInstance FoldableGroup Group instance that has just started to be opened

open

Fired when a group has been fully opened

// jQuery
$foldable.on('open.foldable', ( event, foldableGroupInstance ) => {
    console.log(foldableGroupInstance)
})

// vanilla Javascript
foldable.on('open', foldableGroupInstance => {
    console.log(foldableGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableGroupInstance FoldableGroup Group instance that has been fully opened

before-close

Fired when a group has just started to be closed

// jQuery
$foldable.on('before-close.foldable', ( event, foldableGroupInstance ) => {
    console.log(foldableGroupInstance)
})

// vanilla Javascript
foldable.on('before-close', foldableGroupInstance => {
    console.log(foldableGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableGroupInstance FoldableGroup Group instance that has just started to be closed

close

Fired when a group has been fully closed

// jQuery
$foldable.on('close.foldable', ( event, foldableGroupInstance ) => {
    console.log(foldableGroupInstance)
})

// vanilla Javascript
foldable.on('close', foldableGroupInstance => {
    console.log(foldableGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableGroupInstance FoldableGroup Group instance that has been fully closed

toggle

Fired when a group has been fully toggled.

Both open and close events are listened.

// jQuery
$foldable.on('toggle.foldable', ( event, foldableGroupInstance ) => {
    console.log(foldableGroupInstance)
})

// vanilla Javascript
foldable.on('toggle', foldableGroupInstance => {
    console.log(foldableGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableGroupInstance FoldableGroup Group instance that has been fully toggled

before-animation

Fired when the animation of the target of a group has just started

// jQuery
$foldable.on('before-animation.foldable', ( event, foldableGroupInstance ) => {
    console.log(foldableGroupInstance)
})

// vanilla Javascript
foldable.on('before-animation', foldableGroupInstance => {
    console.log(foldableGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableGroupInstance FoldableGroup Group instance that the animation of the target of a group has just started

animation

Fired when the animation of the target of a group has been fully completed

// jQuery
$foldable.on('animation.foldable', ( event, foldableGroupInstance ) => {
    console.log(foldableGroupInstance)
})

// vanilla Javascript
foldable.on('animation', foldableGroupInstance => {
    console.log(foldableGroupInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableGroupInstance FoldableGroup Group instance that the animation of the target of a group has been fully completed

refresh

// jQuery
$foldable.on('refresh.foldable', ( event, foldableInstance ) => {
    console.log(foldableInstance)
})

// vanilla Javascript
foldable.on('refresh', foldableInstance => {
    console.log(foldableInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableInstance Foldable Foldable instance of the accordion

play

Fired when the accordion has just started to play

// jQuery
$foldable.on('play.foldable', ( event, foldableInstance ) => {
    console.log(foldableInstance)
})

// vanilla Javascript
foldable.on('play', foldableInstance => {
    console.log(foldableInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableInstance Foldable Foldable instance of the accordion

pause

Fired when the accordion has just been paused

// jQuery
$foldable.on('pause.foldable', ( event, foldableInstance ) => {
    console.log(foldableInstance)
})

// vanilla Javascript
foldable.on('pause', foldableInstance => {
    console.log(foldableInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableInstance Foldable Foldable instance of the accordion

stop

Fired when the accordion has just stopped the autoplay intervals

// jQuery
$foldable.on('stop.foldable', ( event, foldableInstance ) => {
    console.log(foldableInstance)
})

// vanilla Javascript
foldable.on('stop', foldableInstance => {
    console.log(foldableInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableInstance Foldable Foldable instance of the accordion

enable

Fired when the accordion is disabled and has just been enabled

// jQuery
$foldable.on('enable.foldable', ( event, foldableInstance ) => {
    console.log(foldableInstance)
})

// vanilla Javascript
foldable.on('enable', foldableInstance => {
    console.log(foldableInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableInstance Foldable Foldable instance of the accordion

disable

Fired when the accordion is enabled and has just been disabled

// jQuery
$foldable.on('disable.foldable', ( event, foldableInstance ) => {
    console.log(foldableInstance)
})

// vanilla Javascript
foldable.on('disable', foldableInstance => {
    console.log(foldableInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableInstance Foldable Foldable instance of the accordion

destroy

Fired when the accordion has just been destroyed

// jQuery
$foldable.on('destroy.foldable', ( event, foldableInstance ) => {
    console.log(foldableInstance)
})

// vanilla Javascript
foldable.on('destroy', foldableInstance => {
    console.log(foldableInstance)
})

Parameters

event jQuery event Event returned from jQuery. This parameter will only be returned using jQuery event format.
foldableInstance Foldable Foldable instance of the accordion