Awesome accordion plugin
Demo page: https://oscardedios.github.io/
Install dependency:
npm install oscapps-accordion
Or with yarn
yarn add oscapps-accordion
You can then import into your bundle:
import OscappsAccordion from 'oscapps-accordion'
Download js and css or use de npm CDN (current version example)
<link href="https://unpkg.com/oscapps-accordion@1.0.8/dist/OscappsAccordion.min.css" rel="stylesheet">
<script type="text/javascript" src="https://unpkg.com/oscapps-accordion@1.0.8/dist/OscappsAccordion.min.js"></script>
For a basic usage, simply add OscappsAccordion class to a definition list (dl)
<dl class="OscappsAccordion">
<dt>Section 1</dt>
<dd>
<p>Content section 1.</p>
</dd>
<dt>Section 2</dt>
<dd>
<p>Content section 1.</p>
</dd>
<dt>Section 3</dt>
<dd>
<p>Content section 1.</p>
</dd>
</dl>`
The plugin is mainly designed to use with dl's but you can use div's to specifying the header and content section with OscappsAccordion-header and OscappsAccordion-section classes.
<div class="OscappsAccordion">
<div class="OscappsAccordion-header">
Section 1
</div>
<div class="OscappsAccordion-section">
Content Section 1
</div>
<div class="OscappsAccordion-header">
Section 2
</div>
<div class="OscappsAccordion-section">
Content Section 2
</div>
</div>
Add is-multiple-selection class to have the possibility to open more than one section at the same time.
Add is-active class to create the accordion opening a section by default.
<dl class="OscappsAccordion is-multiple-selection">
<dt class="is-active">Section 1</dt>
<dd>
<p>Open this section by default</p>
</dd>
<dt>Section 2</dt>
<dd>
<p>Content Section 2</p>
</dd>
<dt>Section 3</dt>
<dd>
<p>Content Section 3</p>
</dd>
</dl>
In order to have more control possibilities is possible to create the accordion instantiating the Object. In this case add the class is-instanced.
<dl id="accordion-id" class="OscappsAccordion is-instance">
<dt class="is-active">Section 1</dt>
<dd>...
Import the plugin and instance the class passing the DOM element of the dl
import OscappsAccordion from 'oscapps-accordion'
const dlElement = document.getElementById('accordion-id')
const instance = new OscappsAccordion(dlElement, options)
Oscapps Accordion provides several options to customize its behaviour (default value in brackets):
Used to set the multiple selection, already explained above.
const instance = new OscappsAccordion(dlElement, { multipleSelection: true })
Used to remove the default arrow icon that is used to indicate if the section is open.
const instance = new OscappsAccordion(dlElement, { arrowIcon: false })
Used to set the animation time in miliseconds. The sections are hide and showed with a slide animation, this animation will take animationTime to finish.
const instance = new OscappsAccordion(dlElement, { animationTime: 1200 })
Callback to execute when a section is opened.
const callback = () => {
alert('Testing awesome plugin')
}
const instance = new OscappsAccordion(dlElement, { onOpen: callback})
It's possible to assing ajax content to one or more sections. The parameter is an array of objects.
The object has two fields:
- indexSection: section to fill with the html content placed in the url. The index starts at zero, (the first section is 0, second 1...). If there is some content in the section will be replaced with the ajax content.
- url: url of the content
const instance = new OscappsAccordion(dlElement, {
ajaxContent: [{
indexSection: 1,
url: './assets/ajaxContent1.html'
}, {
indexSection: 3,
url: './assets/ajaxContent2.html'
}]
})
Open the section specified in the parameter (first section is 0). It's possible to force the opening of the section without close other active section's even the accordion was not created as multiple selection. To do this pass true as second parameter (by default is false).
instance.open(2, true)
Open all the sections even the accordion was not created with multiple-selection option.
instance.openAll()
Close the section specified in the parameter (first section is 0).
instance.close(2)
Close all the sections.
instance.closeAll()
Open the section specified in the parameter if it's closed, or closes it if it's open. It's possible to force the opening of the section without close other active section's even the accordion was not created as multiple selection. To do this pass true as second parameter (by default is false).
instance.toggle(2)
Return if the section specified in the parameter is open.
if (isOpen(2)) { ... }
Return if the section specified in the parameter is open.
instance.open(2)
.open(1)
.close(2)
- Newest two browser versions of Chrome, Firefox, Safari and Edge
- IE 11
OscappsAccordion is available under MIT.