Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/koirodev/kordion

Contemporary style and functionality - an accordion that does more.
https://github.com/koirodev/kordion

accordion dropdown javascript js kordion native smooth transition tree-view view-more vue widget

Last synced: about 1 year ago
JSON representation

Contemporary style and functionality - an accordion that does more.

Awesome Lists containing this project

README 

          


Deprecated!!!
It is no longer supported soon. I recommend using the new package prismium. It contains Kordion and other packages.





# Kordion



**Kordion** is a library for quickly creating flexible accordions on a page using JavaScript. It allows you to create accordions with various settings and styles, as well as control them using JavaScript. Kordion uses vanilla JavaScript and does not depend on third-party libraries, which makes it lightweight and fast.



[![npm downloads](https://img.shields.io/npm/dt/kordion?style=flat-square&color=red)](https://www.npmjs.com/package/kordion)

[![npm downloads](https://img.shields.io/npm/dw/kordion?style=flat-square&color=blue)](https://www.npmjs.com/package/kordion)



## 📋 Table of Contents



- [Getting Started with Kordion](#getting-started-with-kordion)

  - [Installation](#installation)

    - [Install from NPM](#install-from-npm)

    - [Use Kordion from CDN](#use-kordion-from-cdn)

    - [Download](#download)

  - [Kordion HTML Layout](#kordion-html-layout)

  - [Initialize Kordion](#initialize-kordion)

- [Parameters](#parameters)

- [Events](#events)

- [Methods](#methods)

- [Themes](#themes)

  - [`clear`](#clear)

  - [`default`](#default)

  - [`dark`](#dark)

- [Effects](#effects)

  - [`Line-By-Line`](#line-by-line)

- [Plugin for `Vue.js`](#plugin-for-vuejs)

  - [Kordion props](#kordion-props)

  - [Kordion events](#kordion-events)

  - [KordionCurrent props](#kordioncurrent-props)

  - [KordionIcon props](#kordionicon-props)

- [Examples](#examples)

- [FAQ](#faq)



## Getting started with Kordion



### Installation



You have several possible options for installing the Kordion:



### Install from NPM



```bash

$ npm install kordion

```



```JavaScript

// Import Kordion JS

import Kordion from "kordion";



// Import Kordion styles

import "kordion/css";

// Import Kordion theme

import "kordion/theme/default";



const kordion = new Kordion(...);

```



### Use Kordion from CDN



If you don't want to include Kordion files in your project, you may use it from CDN:



```HTML



```



If you use ES modules in your browser, there is a CDN version for that:



```HTML



  import Kordion from "https://cdn.jsdelivr.net/npm/kordion/dist/kordion.min.mjs"



  const kordion = new Kordion(...)



```



### Download



If you want to use Kordion locally, you can directly download them from: [jsdelivr.com](https://www.jsdelivr.com/package/npm/kordion).



## Kordion HTML Layout



Now, we need to add basic Kordion layout:



```HTML





  

  

    I am a button!

    

    

      

    

  

  

  


    

    


      

      

        
Lorem ipsum, dolor sit amet consectetur adipisicing elit.


        


          Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit dolorem optio quaerat assumenda cupiditate quasi incidunt totam expedita voluptatem. Tenetur, dolorum quisquam alias sit asperiores dolorem atque cupiditate numquam magnam?

        


      

    


  




```



## Initialize Kordion



Next we need to initialize Kordion in JavaScript:



```JavaScript

const kordion = new Kordion("[data-kordion]");

```



It's that easy to start working with the accordion. You can also customize its functionality more flexibly.



```JavaScript

const kordion = new Kordion("[data-kordion]", {

  // Options

  speed: 350,

  spritePath: "sprite.svg",

  autoClose: false,

  autoCloseNested: false,

  scrollTo: false,

});

```



These are not all the settings, below you can read about each of them in more detail or see examples of implementation.



### Parameters



  

    

      Option

      Type

      Default

      Description

    

  

  

    

      speed

      Number

      350

      The speed of the animation when opening and closing the accordion.

    

    

      theme

      String

      "clear"

      Theme setup. Requires connection of styles of the selected theme.
By default, kordion does not use themes.


    

    

      autoClose

      Boolean

      false

      Automatically close accordions in one container when opening a new accordion. To do this, you must additionally add a container selector to the markup.

    

    

      autoCloseNested

      Boolean

      false

      Automatically close child accordions when opening a second child accordion in one parent accordion.

    

    

      spritePath

      String

      "sprite.svg"

      Path to sprite with icons, for automatic icon replacement when opening and closing accordion.

    

    

      getKordionHeight

      Boolean

      false

      When set to true, it will use the height of the accordion, not the content inside.

    

    

      container

      Object

      ["[data-kordion-container]", ".section"]

      Container selectors, multiple selectors allowed. 
Used when autoClose: true.

    

    

      parent

      String

      "[kordion-parent]"

      Added automatically to the parent accordion. Does not require prior specification in HTML markup. 
Only data attribute is allowed.

    

    

      current

      String

      "[data-kordion-current]"

      Accordion opening button selector. Any type of selector is allowed.

    

    

      icon

      String

      "[data-kordion-icon]"

      Button icon selector. 
Only data attribute is allowed. 
Accepts two icon names via ,. 
Example: data-kordion-icon="[plus, minus]" or data-kordion-icon="plus, minus". 
Works only with sprites.

    

    

      hidden

      String

      "[data-kordion-hidden]"

      Technical content wrapper selector. 
Any type of selector can be used.

    

    

      content

      String

      "[data-kordion-content]"

      Primary content selector. 
Any type of selector can be used.

    

    

      activeClass

      String

      "js-kordion-active"

      Active accordion class. Set on accordion after opening animation starts and removed when closing animation starts.

    

    

      openedClass

      String

      "js-kordion-opened"

      Class for a fully expanded accordion. Set to hidden after the opening animation ends, and unset when the closing animation starts.

    

    

      disabledClass

      String

      "js-kordion-disabled"

      Class for disabling interaction with accordion content when it is opened or closed. Set automatically to content

    

    

      effect

      String

      

      Register the animation of opening and closing the accordion. Currently there is only line-by-line animation.

    

    

      effectLineByLine

      Object

      

      An object with line-by-line animation parameters.



const kordion = new Kordion("[data-kordion]", {

  theme: "dark",

  effect: "line-by-line",

  effectLineByLine: {

    speed: 500,

    delay: 20,

    y: 50

  },

});



    

    

      events

      Object

      

      Register event handlers

    

  



### Events



You can register event handlers for the basic accordion actions. Example:



```JavaScript

const kordion = new Kordion("[data-kordion]", {

  events: {

    on: {

      init: function (kordion) {

        console.log("kordion initialized");

      },

    },

    before: {

      init: function (kordion) {

        console.log("Accordion initialized");

      },

      hide: function (kordion, instance) {

        console.log("The accordion is fully open");

      },

    },

  }

});



kordion.on("show", (kordion, instance) => {

  console.log("Accordion opening");

});



kordion.on("beforeShow", (kordion, instance) => {

  console.log("Accordion opening");

});

```



The following events are available:



  

    

      Group

      Name

      Arguments

      Description

    

  

  

    

      before

    

    

      init

      (kordion)

      Event before accordion initialization

    

    

      show

      (kordion, instance)

      Event before the opening of the accordion

    

    

      hide

      (kordion, instance)

      Event before accordion closing

    

    

      on

    

    

      init

      (kordion)

      Event immediately after accordions are initialized

    

    

      show

      (kordion, instance)

      Event during the opening of the accordion

    

    

      hide

      (kordion, instance)

      Event during the closing of the accordion

    

    

      after

    

    

      init

      (kordion)

      Event after accordion initialization

    

    

      show

      (kordion, instance)

      Event after the opening of the accordion

    

    

      hide

      (kordion, instance)

      Event after accordion closing

    

  



### Methods



After initializing Kordion, you have an initialized instance of it in a variable (like the kordion variable in the example above) with useful methods and properties.



Example:



```JavaScript

const kordion = new Kordion("[data-kordion]");



// Open all accordions by clicking on `".show-all-in-container"`

// in the container with the class `.container`

const button = document.querySelector(".show-all-in-container")

button.addEventListener("click", () => {

  kordion.showAll(".container");

});

```



  

    

      Method

      Description

    

  

  

    

      kordion.createInstance(element)

      Creates an accordion instance. Returns an accordion instance.

    

    

      kordion.toggle(instance)

      Toggle accordion. Accepts an accordion instance.

    

    

      kordion.show(instance)

      Accordion Opening Method.

    

    

      kordion.showAll(container)

      Method for opening all accordions in the specified container. Accepts a selector or DOM element of the container in which to search.

    

    

      kordion.showEverything()

      Method to open all accordions on a page.

    

    

      kordion.hide(instance)

      Accordion closing method.

    

    

      kordion.hideNested(instance)

      Method for closing child accordions.

    

    

      kordion.hideAll(container)

      Method for closing all accordions in the specified container. Accepts a selector or DOM element of the container in which to search.

    

    

      kordion.hideEverything(thisSelector)

      Method to close all accordions on a page. thisSelector takes a Boolean value, if true, it will be called only for the accordions from which the call occurs, if false, then for ALL accordions on the page, without reference to the accordion from which the call occurs. Default: true

    

    

      kordion.off(eventName, handler)

      Remove event handler

    

    

      kordion.offAny(handler)

      Remove event listener that will be fired on all events

    

    

      kordion.on(eventName, handler)

      Add event handler

    

    

      kordion.replaceIcon(instance, hidden = true)

      Method for replacing an icon. Accepts an accordion instance and a boolean icon value:


      true = open accordion icon;

      


      false = closed accordion icon.

    

  



## Themes



### `clear`



This is a standard theme, for which it is enough to connect only standard styles. It contains only the most necessary styles for the accordion to work.



### `Default`



Standard Kordion theme made with love for users.



- Codepen

- Example page



  View screenshot

  



### `Dark`



Dark theme for connoisseurs of greatness.



- Codepen

- Example page



  View screenshot

  



## Effects



### `Line-By-Line`



Line-by-line appearance of accordion content.



  Preview GIF

  



```JavaScript

import Kordion from "kordion";



const kordion = new Kordion("[data-kordion]", {

  theme: "dark",

  effect: "line-by-line",

  effectLineByLine: {

    speed: 350,

    easing: "ease",

    delay: 20,

    y: 50,

  },

});

```



  

    

      Option

      Type

      Default

      Description

    

  

  

    

      speed

      Number

      350

      Animation speed

    

    

      easing

      String

      "cubic-bezier(.25,.1,.25,1)"

      Animation timing function

    

    

      delay

      Number

      30

      Delay from previous to next element.

    

    

      scale

      Number

      0.95

      The scale value from which the animation will start.

    

    

      y

      Number/String

      20

      The offset along the Y axis from which the animation will start.

    

    

      x

      Number/String

      0

      The offset along the X axis from which the animation will start.

    

    

      opacity

      Number/String

      0.6

      The opacity value at which the animation will start.

    

    

      clearProps

      Object

      ["transform", "opacity", "transition"]

      Clearing props. Specifies which props will be cleared at the end of the animation. It is acceptable to enter a string or boolean values.

    

  



## Plugin for `Vue.js`



Установка:



```bash

$ npm install kordion

```



Использование:



```HTML



import { Kordion, KordionCurrent, KordionContent, KordionIcon } from 'kordion/vue'

import 'kordion/css'

import 'kordion/theme/dark'



const kordionOptions = {

  speed: 500,

  theme: 'dark',

}



  
 

    

      

        Open

         

      

      

        
Content


        
Content


        
Content


        
Content


      

    

  



```



### Kordion props



  

    

      Prop

      Type

      Default

      Required

      Description

    

  

  

    

      options

      Object

      {}

      false

      The same parameters are passed as in core. It is forbidden to transmit events.

    

  



### Kordion events

The Kordion component supports all Kordion events except initialization events. For example:



```HTML



```



### KordionCurrent props



  

    

      Prop

      Type

      Default

      Required

      Description

    

  

  

    

      selector

      String

      "button"

      false

      HTML button selector. It is allowed to pass any existing HTML selector.

    

    

      attributes

      Object

      {}

      false

      The attributes of the button. For example: type: "button". It is allowed to transfer date attributes, etc.

    

  



### KordionIcon props



  

    

      Prop

      Type

      Default

      Required

      Description

    

  

  

    

      value

      String

      "sprite.svg#icon"

      false

      The initial value of the icon

    

    

      icons

      String

      

      true

      Two icons separated by a comma. For example: "plus, minus"

    

  



## Examples



You can see more detailed examples by following the link.



## FAQ



### How to build ready files?



It's very simple. Make sure you are in the root of the repository and enter the commands in your terminal:



```bash

$ npm install

$ npm run build

```



Done. The collected files are in the `./dist` directory.