Jaccordion
Jaccordion is a vanilla Javascript ES6 library with a simple API.
Jaccordion comes from the name, Jacob
👶 plus accordion
Demo
Visit https://giodelabarrera.github.io/jaccordion/ for view the storybook demo.
Available Scripts
Using NPM scripts
-
start
- Run storybook -
test
- Run test -
coverage
- Run test coverage -
build
- Build library
Installation
npm install --save @giodelabarrera/jaccordion
Builds
UMD | ES Module | |
---|---|---|
Normal | jaccordion.js | jaccordion.esm.js |
Minified | jaccordion.min.js | --- |
Setup
Styling
Using <link>
<link rel="stylesheet" href="node_modules/@giodelabarrera/jaccordion/dist/css/jaccordion.min.css">
Using SASS @import
@import 'node_modules/@giodelabarrera/jaccordion/dist/sass/jaccordion'
Structure
<dl>
<dt>Section 1</dt>
<dd>
<p>Section 1 Content...</p>
</dd>
<dt>Section 2</dt>
<dd>
<p>Section 2 Content...</p>
</dd>
<dt>Section 3</dt>
<dd>
<p>Section 3 Content...</p>
</dd>
</dl>
Initialization
Using <script>
<script src="node_modules/@giodelabarrera/jaccordion/dist/jaccordion.min.js"></script>
<script>
new Jaccordion(document.querySelector('dl')).mount()
</script>
Using ES Modules
import Jaccordion from '@giodelabarrera/jaccordion'
new Jaccordion(document.querySelector('dl')).mount()
Options
openAt
- @default:
0
- @type:
Number
Identifier of the item that appears open by default
multiple
- @default:
false
- @type:
Boolean
Determines if there may be more than one item open
entries
- @default:
[]
- @type:
Object[]
Entries to make items
ajax
- @default:
[object Object]
- @type:
Object
Object for make items by request
ajax: {
url: '',
processResults: function(data) {
return data
}
},
classes
- @default:
[object Object]
- @type:
Object
Object with classes for styles
classes: {
root: 'jaccordion',
header: 'jaccordion__header',
opened: 'jaccordion__header--opened',
content: 'jaccordion__content'
}
API
.mount()
Mount the accordion with your items. Add styles and bind events
.disable()
Disable the accordion
.enable()
Enable the accordion
.toggle(id)
- @param:
Number id
Toogle item (open or close)
.isOpen(id)
- @param:
Number id
Indicates if a item is open
.open(id)
- @param:
Number id
Open item
.close(id)
- @param:
Number id
Close item
.append(entry)
- @param:
Object entry
- @param:
Number entry.id
- @param:
String entry.header
- @param:
String entry.content
Append a item from entry
.prepend(entry)
- @param:
Object entry
- @param:
Number entry.id
- @param:
String entry.header
- @param:
String entry.content
Prepend a item from entry
.appendBefore(entry, referenceId)
- @param:
Object entry
- @param:
Number entry.id
- @param:
String entry.header
- @param:
String entry.content
- @param:
Number referenceId
Append a item before of an item from entry
.appendAfter(entry, referenceId)
- @param:
Object entry
- @param:
Number entry.id
- @param:
String entry.header
- @param:
String entry.content
- @param:
Number referenceId
Append a item after of an item from entry
.remove(id)
- @param:
Number id
Remove an item from id
.on(event, handler)
- @param:
String event
- @param:
Function handler
Subscribe a handler to an event
.unmount()
Unmount the accordion. Remove styles and associated events
Events
Jaccordion has events that occur during its methods. To add a certain behavior of your own in a certain phase you can do it using the method .on(event, handler)
.
const jaccordion = new Jaccordion(document.querySelector('dl'))
jaccordion.on('mount.after', () => {
console.log('Mount correctly!')
})
jaccordion.mount()
mount.before
It is called before starting to mount the items
mount.after
It is called once having mounted the items
open.before
Arguments:
{Object} item
It is called before opening the item
open.after
Arguments:
{Object} item
It is called after opening the item
close.before
Arguments:
{Object} item
It is called before closing the item
close.after
Arguments:
{Object} item
It is called after closing the item
append
Arguments:
{Object} item
It is called after adding new item
prepend
Arguments:
{Object} item
It is called after adding new item
appendBefore
Arguments:
{Object} item
It is called after adding new item
appendAfter
Arguments:
{Object} item
It is called after adding new item
remove.before
Arguments:
{Object} item
It is called before removing the item
remove.after
Arguments:
{Number} id
It is called after removing the item
unmount
It is called when it has finished unmounting
ajaxEntries.before
It is called before making ajax request
ajaxEntries.success
It is called after having finished the request of ajax
Author
Giorgio de la Barrera https://github.com/giodelabarrera