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 |