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

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 ``` ### 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.