j-accordion

j-accordion.js is a jQuery accordion plugin.

Usage no npm install needed!

<script type="module">
  import jAccordion from 'https://cdn.skypack.dev/j-accordion';
</script>

README

j-accordion.js v.2.0.2

j-accordion.js is a jQuery accordion plugin.

You can see the demo HERE.

New features

  • Mobile friendly (By default, it uses Twitter Bootstrap)
  • Able to specify the number of accordions and the number of sliding boxes to be created
  • Other advanced settings

Installation

NPM

npm i j-accordion

Settings

numberOfAccordions (Optional)
  • Type: integer
  • Default: 4

Specify the number of accordions to be created.

numberOfBoxesPerAccordion (Optional)
  • Type: integer
  • Default: 3

Specify the number of sliding boxes (per accordion) to be created.

accordionHeadings (Optional)
  • Type: array
  • Default: ['Heading 1', 'Heading 2', 'Heading 3', 'Heading 4']

Specify the heading for each accordion.

divAccordionContainerClass (Optional)
  • Type: string
  • Default: 'col-sm'

Specify the CSS class for each accordion. By default, the value is Twitter Bootstrap grid system class 'col-sm'.

data
  • Type: array
  • Default: 'col-sm'

Content that is going to present. An example for 2 accordions, each accordion has 3 sliding boxes.

[
  [{
    imagePath: 'images/yosemite-640x400.jpg',
    heading: 'Yosemite',
    content: 'California'
  },
  {
    imagePath: 'images/yellowstone-national-park-640x400.jpg',
    heading: 'Yellowstone',
    content: 'Wyoming, Montana and Idaho'
  },
  {
    imagePath: 'images/grand-canyon-national-park-640x400.jpg',
    heading: 'Grand Canyon',
    content: 'Arizona'
  }],
  [{
    imagePath: 'images/nozawa-onsen-640x400.jpg',
    heading: 'Nozawa Onsen',
    content: 'Nagano Prefecture'
  },
  {
    imagePath: 'images/kyoto-640x400.jpg',
    heading: 'Kyoto',
    content: 'Kyoto Prefecture'
  },
  {
    imagePath: 'images/tokyo-640x400.jpg',
    heading: 'Tokyo',
    content: 'Tokyo Metropolis'
  }]
]