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
• 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

Events

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

const kordion = new Kordion("[data-kordion]", {
  on: {
    init: function (kordion) {
      console.log("kordion initialized");
    },
  },
  click: (kordion, event) => {
    console.log("click event", kordion, event);
  },
});

The following events are available:

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");
});

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

Dark

Dark theme for connoisseurs of greatness.

• Codepen
• Example page

Effects

Line-By-Line

Line-by-line appearance of accordion content.

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,
  },
});

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.