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
Fired when the accordion has been refreshed (using refresh method)
// 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 |