<h3><b style="color: red;">Deprecated!!!</b><br>It is no longer supported soon. I recommend using the new package <a href="https://github.com/koirodev/prismium" target="_blank">prismium</a>. It contains Kordion and other packages.</h3> <hr>

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. <strong>Kordion uses vanilla JavaScript</strong> and does not depend on third-party libraries, which makes it lightweight and fast.

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

<table> <thead> <tr> <th>Option</th> <th>Type</th> <th>Default</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td><code>speed</code></td> <td>Number</td> <td><code>350</code></td> <td>The speed of the animation when opening and closing the accordion.</td> </tr> <tr> <td><code>theme</code></td> <td>String</td> <td><code>"clear"</code></td> <td>Theme setup. Requires connection of styles of the selected theme.<br><b>By default, kordion does not use themes.<b><br></td> </tr> <tr> <td><code>autoClose</code></td> <td>Boolean</td> <td><code>false</code></td> <td>Automatically close accordions in one container when opening a new accordion. To do this, you must additionally add a container selector to the markup.</td> </tr> <tr> <td><code>autoCloseNested</code></td> <td>Boolean</td> <td><code>false</code></td> <td>Automatically close child accordions when opening a second child accordion in one parent accordion.</td> </tr> <tr> <td><code>spritePath</code></td> <td>String</td> <td><code>"sprite.svg"</code></td> <td>Path to sprite with icons, for automatic icon replacement when opening and closing accordion.</td> </tr> <tr> <td><code>getKordionHeight</code></td> <td>Boolean</td> <td><code>false</code></td> <td>When set to true, it will use the height of the accordion, not the content inside.</td> </tr> <tr> <td><code>container</code></td> <td>Object</td> <td><code>["[data-kordion-container]", ".section"]</code></td> <td>Container selectors, multiple selectors allowed. <br>Used when <code>autoClose: true</code>.</td> </tr> <tr> <td><code>parent</code></td> <td>String</td> <td><code>"[kordion-parent]"</code></td> <td>Added automatically to the parent accordion. Does not require prior specification in HTML markup. <br><b>Only data attribute is allowed.</b></td> </tr> <tr> <td><code>current</code></td> <td>String</td> <td><code>"[data-kordion-current]"</code></td> <td>Accordion opening button selector. Any type of selector is allowed.</td> </tr> <tr> <td><code>icon</code></td> <td>String</td> <td><code>"[data-kordion-icon]"</code></td> <td>Button icon selector. <br><b>Only data attribute is allowed.</b> <br>Accepts two icon names via <code>,</code>. <br>Example: <code>data-kordion-icon="[plus, minus]"</code> or <code>data-kordion-icon="plus, minus"</code>. <br>Works only with sprites.</td> </tr> <tr> <td><code>hidden</code></td> <td>String</td> <td><code>"[data-kordion-hidden]"</code></td> <td>Technical content wrapper selector. <br>Any type of selector can be used.</td> </tr> <tr> <td><code>content</code></td> <td>String</td> <td><code>"[data-kordion-content]"</code></td> <td>Primary content selector. <br>Any type of selector can be used.</td> </tr> <tr> <td><code>activeClass</code></td> <td>String</td> <td><code>"js-kordion-active"</code></td> <td>Active accordion class. Set on accordion after opening animation starts and removed when closing animation starts.</td> </tr> <tr> <td><code>openedClass</code></td> <td>String</td> <td><code>"js-kordion-opened"</code></td> <td>Class for a fully expanded accordion. Set to <code>hidden</code> after the opening animation ends, and unset when the closing animation starts.</td> </tr> <tr> <td><code>disabledClass</code></td> <td>String</td> <td><code>"js-kordion-disabled"</code></td> <td>Class for disabling interaction with accordion content when it is opened or closed. Set automatically to <code>content</code></td> </tr> <tr> <td><code>effect</code></td> <td>String</td> <td></td> <td>Register the animation of opening and closing the accordion. Currently there is only <code>line-by-line</code> animation.</td> </tr> <tr> <td><code>effectLineByLine</code></td> <td>Object</td> <td></td> <td>An object with <code>line-by-line</code> animation parameters. <pre><code> const kordion = new Kordion("[data-kordion]", { theme: "dark", effect: "line-by-line", effectLineByLine: { speed: 500, delay: 20, y: 50 }, }); </code></pre></td> </tr> <tr> <td><code>events</code></td> <td>Object</td> <td></td> <td>Register event handlers</td> </tr> </tbody> </table>

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:

<table> <thead> <tr> <th>Group</th> <th>Name</th> <th>Arguments</th> <th>Description</th> </tr> </thead> <tbody> <tr> <td rowspan="4"><code

Kordion

Install / Use

README

Kordion

📋 Table of Contents

Getting started with Kordion

Installation

Install from NPM

Use Kordion from CDN

Download

Kordion HTML Layout

Initialize Kordion

Parameters

Events