Oscapps Accordion

Plugin to show and hide content with a slide animation.

Basic Usage

Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac mauris ac lacus finibus venenatis eget fringilla odio. Nulla ligula nulla, vestibulum nec consectetur at, ornare sed felis. Pellentesque mattis, urna finibus eleifend aliquet, est leo ultrices eros, in varius felis massa egestas magna. Aliquam non est sollicitudin, vestibulum lacus vitae, rhoncus ex. Mauris rhoncus tellus leo, id suscipit lectus bibendum in. Nunc nec fringilla risus, ut tincidunt eros. Sed justo dui, placerat et neque ut, sollicitudin consequat nibh. Mauris interdum enim ut leo ornare, placerat blandit libero mollis. Aliquam molestie sagittis fermentum. Nulla fermentum nibh vitae sapien congue lobortis. Suspendisse ac diam ac lacus suscipit vulputate. Suspendisse vel viverra turpis.

Section 2

Integer sollicitudin hendrerit odio, eu facilisis leo. Nullam dictum dui eu turpis ultrices, at tempor enim finibus. Integer ullamcorper lobortis porta. Pellentesque non ex mattis, convallis massa vel, laoreet elit. Cras at semper risus. Donec efficitur metus quis felis luctus hendrerit in eget enim. Integer gravida elit et mauris dignissim molestie. Nam malesuada justo vel mi auctor, eget rutrum libero scelerisque. Vestibulum odio ipsum, facilisis ut orci quis, rutrum ultrices dolor. Nulla in pretium felis.

Section 3

Nunc auctor, ex vitae porta luctus, purus elit eleifend enim, id dictum augue risus eget massa. Etiam imperdiet lectus neque, eu ultricies eros dapibus in. Etiam facilisis justo sed magna fringilla, at placerat felis eleifend. Proin eget enim porta, eleifend sem sed, rhoncus dolor. Ut congue quam at facilisis tristique. Quisque eleifend est vel magna gravida rhoncus. Suspendisse potenti. Nullam quis augue congue, auctor sem eu, rhoncus enim. Nulla eros elit, pulvinar at odio et, blandit imperdiet mi. Etiam ut eleifend leo, et sagittis nisi.

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 Section2</p>
  </dd>
  <dt>Section 3</dt>
  <dd>
    <p>Content Section 3</p>
  </dd>
</dl>

Usage with DIV and name classes

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.

Section 1

Content Section 1

Section 2

Content Section 2


<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>

Multiple Selection

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.

Section 1

Opening this section by default

Section 2

Section 3


<dl class="OscappsAccordion is-multiple-selection">
  <dt class="is-active">Section 1</dt>
  <dd>
    <p>Content Section1</p>
  </dd>
  <dt>Section 2</dt>
  <dd>
    <p>Content Section2</p>
  </dd>
  <dt>Section 3</dt>
  <dd>
    <p>Content Section 3</p>
  </dd>
</dl>

Initialize with instantion class

In order to have more control possibilities is possible to create the accordion instantiating the Object. In this case add the class is-instance.


<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)

Options

OscappsAccordion provides several options to customize its behaviour (default value in brackets):

multipleSelection (false)

It's used to set the multiple selection, already explained above.


  const instance = new OscappsAccordion(dlElement, { multipleSelection: true })

arrowIcon (true)

It's used to remove the default arrow icon that is used to indicate if the section is open.


  const instance = new OscappsAccordion(dlElement, { arrowIcon: false })

animationTime (600)

It's 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 })

onOpen (false)

Callback to execute when a section is opened.


  const callback = () => {
    alert('Testing awesome plugin')
  }

  const instance = new OscappsAccordion(dlElement, { onOpen: callback})

ajaxContent (false)

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'
  }]
})

Instance Example 1

Accordion with ajax content in sections 2 (1) and 4 (3) and animation time of 2 seconds.

Section 1: Content Section 1
Section 2: ajax content
Section 3: Nunc auctor, ex vitae porta luctus, purus elit eleifend enim, id dictum augue risus eget massa. Etiam imperdiet lectus neque, eu ultricies eros dapibus in. Etiam facilisis justo sed magna fringilla, at placerat felis eleifend. Proin eget enim porta, eleifend sem sed, rhoncus dolor. Ut congue quam at facilisis tristique. Quisque eleifend est vel magna gravida rhoncus. Suspendisse potenti. Nullam quis augue congue, auctor sem eu, rhoncus enim. Nulla eros elit, pulvinar at odio et, blandit imperdiet mi. Etiam ut eleifend leo, et sagittis nisi.
Section 4: ajax content


<dl id="OscappsAccordion-example-1" class="OscappsAccordion is-instance">
  <dt>Section 1</dt>
  <dd>
    Content Section 1
  </dd>
  <dt>Section 2</dt>
  <dd>
    ajax content
  </dd>
  <dt>Section 3</dt>
  <dd>
    <p>Nunc auctor, ex vitae porta luctus, purus elit eleifend enim, id dictum augue risus eget massa. Etiam imperdiet lectus neque, eu ultricies eros dapibus in. Etiam facilisis justo sed magna fringilla, at placerat felis eleifend. Proin eget enim porta, eleifend sem sed, rhoncus dolor. Ut congue quam at facilisis tristique. Quisque eleifend est vel magna gravida rhoncus. Suspendisse potenti. Nullam quis augue congue, auctor sem eu, rhoncus enim. Nulla eros elit, pulvinar at odio et, blandit imperdiet mi. Etiam ut eleifend leo, et sagittis nisi.</p>
  </dd>
  <dt>Section 4</dt>
  <dd>
    ajax content
  </dd>
</dl>


const instance = new OscappsAccordion(document.getElementById('OscappsAccordion-ajax'), {
  ajaxContent: [{
    indexSection: 1,
    url: './assets/ajaxContent1.html'
  }, {
    indexSection: 3,
    url: './assets/ajaxContent2.html'
  }],
  animationTime: 2000
})

Instance Example 2

Accordion without icons and a callback execution when open

Section 1: Content Section 1
Section 2: Content Section 2


<dl id="OscappsAccordion-example-2" class="OscappsAccordion is-instance">
  <dt>Section 1</dt>
  <dd>
    Content Section 1
  </dd>
  <dt>Section 2</dt>
  <dd>
    Content Section 2
  </dd>
</dl>


const callback = () => {
  alert('Testing awesome plugin')
}

const instance2 = new OscappsAccordion(document.getElementById('OscappsAccordion-ajax2'), {
  onOpen: callback,
  arrowIcon: false
})

Methods

open (indexSection, allowMultiple)

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)

openAll

Open all the sections even the accordion was not created with multiple-selection option.


instance.openAll()

close

Close the section specified in the parameter (first section is 0).


instance.close(2)

closeAll

Close all the sections


instance.closeAll()

toggle (indexSection, allowMultiple)

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)

isOpen (indexSection)

Return if the section specified in the parameter is open.


if (isOpen(2)) { ... }

Chaining methods

It's possible to chain methods.


instance.open(2)
        .open(1)
        .close(2)

Methods Example

Accordion with ajax content in sections 1 and 3 and animation time of 1500 miliseconds.

Section 1

Section 2

Section 3