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.

📋 Table of Contents

• Getting Started with Kordion
  • Installation
    • Install from NPM
    • Use Kordion from CDN
    • Download
  • Kordion HTML Layout
  • Initialize Kordion
• Parameters
• Events
• Methods
• Themes
  • clear
  • default
  • dark
• Effects
  • Line-By-Line
• Plugin for Vue.js
  • Kordion props
  • Kordion events
  • KordionCurrent props
  • KordionIcon props
• Examples
• FAQ

Getting started with Kordion

Installation

You have several possible options for installing the Kordion:

Install from NPM

$ npm install kordion

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

<!-- Default styles -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kordion/dist/kordion.min.css">
<!-- Theme -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/kordion/dist/themes/default.min.css">

<!-- Script -->
<script src="https://cdn.jsdelivr.net/npm/kordion/dist/kordion.min.js"></script>

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

<script type="module">
  import Kordion from "https://cdn.jsdelivr.net/npm/kordion/dist/kordion.min.mjs"

  const kordion = new Kordion(...)
</script>

Download

If you want to use Kordion locally, you can directly download them from: jsdelivr.com.

Kordion HTML Layout

Now, we need to add basic Kordion layout:

<!-- The accordion itself -->
<div data-kordion>
  <!-- Accordion Open Button -->
  <button data-kordion-current>
    <span>I am a button!</span>
    <!-- Button icon -->
    <svg data-kordion-icon="[plus, minus]">
      <use xlink:href="sprite.svg#plus"></use>
    </svg>
  </button>
  <!-- Technical wrapping of content -->
  <div data-kordion-hidden>
    <!-- Main content wrapper -->
    <div data-kordion-content>
      <!-- Any of your content can be here, for example: -->
      <article class="article">
        <h2>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</h2>
        <p>
          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?
        </p>
      </article>
    </div>
  </div>
</div>

Initialize Kordion

Next we need to initialize Kordion in 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.

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:

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:

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

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

Установка:

$ npm install kordion

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

<script setup>
import { Kordion, KordionCurrent, KordionContent, KordionIcon } from 'kordion/vue'
import 'kordion/css'
import 'kordion/theme/dark'

const kordionOptions = {
  speed: 500,
  theme: 'dark',
}
</script>

<template>
  <div data-kordion-container> <!-- Not obligatory. Required for automatic closing to work. -->
    <Kordion 
      :options="kordionOptions"
      @show="console.log('show')"
      @hide="console.log('hide')"
      @before-show="console.log('before-show')"
      @before-hide="console.log('before-hide')"
      @after-show="console.log('after-show')"
      @after-hide="console.log('after-hide')"
    >
      <KordionCurrent selector="button" :attributes="{ type: 'button', title: 'open' }">
        <span>Open</span>
        <KordionIcon value="sprite.svg#plus" icons="plus, minus" /> <!-- It is optional -->
      </KordionCurrent>
      <KordionContent>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
        <p>Content</p>
      </KordionContent>
    </Kordion>
  </div>
</template>

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:

<Kordion @before-show="..." @before-hide="..." @after-hide="...">

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:

$ npm install
$ npm run build

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