{"id":25614432,"url":"https://github.com/koirodev/kordion","last_synced_at":"2025-04-13T20:01:46.474Z","repository":{"id":261678800,"uuid":"885006106","full_name":"koirodev/kordion","owner":"koirodev","description":"Contemporary style and functionality - an accordion that does more.","archived":false,"fork":false,"pushed_at":"2025-02-01T07:17:21.000Z","size":1105,"stargazers_count":28,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T10:38:52.409Z","etag":null,"topics":["accordion","dropdown","javascript","js","kordion","native","smooth","transition","tree-view","view-more","vue","widget"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/koirodev.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-07T19:29:11.000Z","updated_at":"2025-03-09T00:52:57.000Z","dependencies_parsed_at":"2025-01-07T10:19:33.277Z","dependency_job_id":null,"html_url":"https://github.com/koirodev/kordion","commit_stats":null,"previous_names":["koirodev/kardion"],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fkordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fkordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fkordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/koirodev%2Fkordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/koirodev","download_url":"https://codeload.github.com/koirodev/kordion/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248456382,"owners_count":21106605,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","dropdown","javascript","js","kordion","native","smooth","transition","tree-view","view-more","vue","widget"],"created_at":"2025-02-22T02:19:41.378Z","updated_at":"2025-04-13T20:01:46.433Z","avatar_url":"https://github.com/koirodev.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch3\u003e\u003cb style=\"color: red;\"\u003eDeprecated!!!\u003c/b\u003e\u003cbr\u003eIt is no longer supported soon. I recommend using the new package \u003ca href=\"https://github.com/koirodev/prismium\" target=\"_blank\"\u003eprismium\u003c/a\u003e. It contains Kordion and other packages.\u003c/h3\u003e\n\u003chr\u003e\n\n# Kordion\n\n**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. \u003cstrong\u003eKordion uses vanilla JavaScript\u003c/strong\u003e and does not depend on third-party libraries, which makes it lightweight and fast.\n\n[![npm downloads](https://img.shields.io/npm/dt/kordion?style=flat-square\u0026color=red)](https://www.npmjs.com/package/kordion)\n[![npm downloads](https://img.shields.io/npm/dw/kordion?style=flat-square\u0026color=blue)](https://www.npmjs.com/package/kordion)\n\n## 📋 Table of Contents\n\n- [Getting Started with Kordion](#getting-started-with-kordion)\n  - [Installation](#installation)\n    - [Install from NPM](#install-from-npm)\n    - [Use Kordion from CDN](#use-kordion-from-cdn)\n    - [Download](#download)\n  - [Kordion HTML Layout](#kordion-html-layout)\n  - [Initialize Kordion](#initialize-kordion)\n- [Parameters](#parameters)\n- [Events](#events)\n- [Methods](#methods)\n- [Themes](#themes)\n  - [`clear`](#clear)\n  - [`default`](#default)\n  - [`dark`](#dark)\n- [Effects](#effects)\n  - [`Line-By-Line`](#line-by-line)\n- [Plugin for `Vue.js`](#plugin-for-vuejs)\n  - [Kordion props](#kordion-props)\n  - [Kordion events](#kordion-events)\n  - [KordionCurrent props](#kordioncurrent-props)\n  - [KordionIcon props](#kordionicon-props)\n- [Examples](#examples)\n- [FAQ](#faq)\n\n## Getting started with Kordion\n\n### Installation\n\nYou have several possible options for installing the Kordion:\n\n### Install from NPM\n\n```bash\n$ npm install kordion\n```\n\n```JavaScript\n// Import Kordion JS\nimport Kordion from \"kordion\";\n\n// Import Kordion styles\nimport \"kordion/css\";\n// Import Kordion theme\nimport \"kordion/theme/default\";\n\nconst kordion = new Kordion(...);\n```\n\n### Use Kordion from CDN\n\nIf you don't want to include Kordion files in your project, you may use it from CDN:\n\n```HTML\n\u003c!-- Default styles --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/kordion/dist/kordion.min.css\"\u003e\n\u003c!-- Theme --\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/kordion/dist/themes/default.min.css\"\u003e\n\n\u003c!-- Script --\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/kordion/dist/kordion.min.js\"\u003e\u003c/script\u003e\n```\n\nIf you use ES modules in your browser, there is a CDN version for that:\n\n```HTML\n\u003cscript type=\"module\"\u003e\n  import Kordion from \"https://cdn.jsdelivr.net/npm/kordion/dist/kordion.min.mjs\"\n\n  const kordion = new Kordion(...)\n\u003c/script\u003e\n```\n\n### Download\n\nIf you want to use Kordion locally, you can directly download them from: [jsdelivr.com](https://www.jsdelivr.com/package/npm/kordion).\n\n## Kordion HTML Layout\n\nNow, we need to add basic Kordion layout:\n\n```HTML\n\u003c!-- The accordion itself --\u003e\n\u003cdiv data-kordion\u003e\n  \u003c!-- Accordion Open Button --\u003e\n  \u003cbutton data-kordion-current\u003e\n    \u003cspan\u003eI am a button!\u003c/span\u003e\n    \u003c!-- Button icon --\u003e\n    \u003csvg data-kordion-icon=\"[plus, minus]\"\u003e\n      \u003cuse xlink:href=\"sprite.svg#plus\"\u003e\u003c/use\u003e\n    \u003c/svg\u003e\n  \u003c/button\u003e\n  \u003c!-- Technical wrapping of content --\u003e\n  \u003cdiv data-kordion-hidden\u003e\n    \u003c!-- Main content wrapper --\u003e\n    \u003cdiv data-kordion-content\u003e\n      \u003c!-- Any of your content can be here, for example: --\u003e\n      \u003carticle class=\"article\"\u003e\n        \u003ch2\u003eLorem ipsum, dolor sit amet consectetur adipisicing elit.\u003c/h2\u003e\n        \u003cp\u003e\n          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?\n        \u003c/p\u003e\n      \u003c/article\u003e\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\n## Initialize Kordion\n\nNext we need to initialize Kordion in JavaScript:\n\n```JavaScript\nconst kordion = new Kordion(\"[data-kordion]\");\n```\n\nIt's that easy to start working with the accordion. You can also customize its functionality more flexibly.\n\n```JavaScript\nconst kordion = new Kordion(\"[data-kordion]\", {\n  // Options\n  speed: 350,\n  spritePath: \"sprite.svg\",\n  autoClose: false,\n  autoCloseNested: false,\n  scrollTo: false,\n});\n```\n\nThese are not all the settings, below you can read about each of them in more detail or see examples of implementation.\n\n### Parameters\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eOption\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003espeed\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e350\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe speed of the animation when opening and closing the accordion.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003etheme\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"clear\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eTheme setup. Requires connection of styles of the selected theme.\u003cbr\u003e\u003cb\u003eBy default, kordion does not use themes.\u003cb\u003e\u003cbr\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eautoClose\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAutomatically close accordions in one container when opening a new accordion. To do this, you must additionally add a container selector to the markup.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eautoCloseNested\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAutomatically close child accordions when opening a second child accordion in one parent accordion.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003espritePath\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"sprite.svg\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePath to sprite with icons, for automatic icon replacement when opening and closing accordion.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003egetKordionHeight\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eBoolean\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eWhen set to true, it will use the height of the accordion, not the content inside.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003econtainer\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e[\"[data-kordion-container]\", \".section\"]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eContainer selectors, multiple selectors allowed. \u003cbr\u003eUsed when \u003ccode\u003eautoClose: true\u003c/code\u003e.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eparent\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"[kordion-parent]\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAdded automatically to the parent accordion. Does not require prior specification in HTML markup. \u003cbr\u003e\u003cb\u003eOnly data attribute is allowed.\u003c/b\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ecurrent\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"[data-kordion-current]\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAccordion opening button selector. Any type of selector is allowed.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eicon\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"[data-kordion-icon]\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eButton icon selector. \u003cbr\u003e\u003cb\u003eOnly data attribute is allowed.\u003c/b\u003e \u003cbr\u003eAccepts two icon names via \u003ccode\u003e,\u003c/code\u003e. \u003cbr\u003eExample: \u003ccode\u003edata-kordion-icon=\"[plus, minus]\"\u003c/code\u003e or \u003ccode\u003edata-kordion-icon=\"plus, minus\"\u003c/code\u003e. \u003cbr\u003eWorks only with sprites.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ehidden\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"[data-kordion-hidden]\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eTechnical content wrapper selector. \u003cbr\u003eAny type of selector can be used.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003econtent\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"[data-kordion-content]\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003ePrimary content selector. \u003cbr\u003eAny type of selector can be used.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eactiveClass\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"js-kordion-active\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eActive accordion class. Set on accordion after opening animation starts and removed when closing animation starts.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eopenedClass\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"js-kordion-opened\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eClass for a fully expanded accordion. Set to \u003ccode\u003ehidden\u003c/code\u003e after the opening animation ends, and unset when the closing animation starts.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edisabledClass\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"js-kordion-disabled\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eClass for disabling interaction with accordion content when it is opened or closed. Set automatically to \u003ccode\u003econtent\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eeffect\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eRegister the animation of opening and closing the accordion. Currently there is only \u003ccode\u003eline-by-line\u003c/code\u003e animation.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eeffectLineByLine\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eAn object with \u003ccode\u003eline-by-line\u003c/code\u003e animation parameters.\n\u003cpre\u003e\u003ccode\u003e\nconst kordion = new Kordion(\"[data-kordion]\", {\n  theme: \"dark\",\n  effect: \"line-by-line\",\n  effectLineByLine: {\n    speed: 500,\n    delay: 20,\n    y: 50\n  },\n});\n\u003c/code\u003e\u003c/pre\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eevents\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003eRegister event handlers\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n### Events\n\nYou can register event handlers for the basic accordion actions. Example:\n\n```JavaScript\nconst kordion = new Kordion(\"[data-kordion]\", {\n  events: {\n    on: {\n      init: function (kordion) {\n        console.log(\"kordion initialized\");\n      },\n    },\n    before: {\n      init: function (kordion) {\n        console.log(\"Accordion initialized\");\n      },\n      hide: function (kordion, instance) {\n        console.log(\"The accordion is fully open\");\n      },\n    },\n  }\n});\n\nkordion.on(\"show\", (kordion, instance) =\u003e {\n  console.log(\"Accordion opening\");\n});\n\nkordion.on(\"beforeShow\", (kordion, instance) =\u003e {\n  console.log(\"Accordion opening\");\n});\n```\n\nThe following events are available:\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eGroup\u003c/th\u003e\n      \u003cth\u003eName\u003c/th\u003e\n      \u003cth\u003eArguments\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd rowspan=\"4\"\u003e\u003ccode\u003ebefore\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003einit\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent before accordion initialization\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eshow\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion, instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent before the opening of the accordion\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ehide\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion, instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent before accordion closing\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd rowspan=\"4\"\u003e\u003ccode\u003eon\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003einit\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent immediately after accordions are initialized\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eshow\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion, instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent during the opening of the accordion\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ehide\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion, instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent during the closing of the accordion\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd rowspan=\"4\"\u003e\u003ccode\u003eafter\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003einit\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent after accordion initialization\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eshow\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion, instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent after the opening of the accordion\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ehide\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e(kordion, instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eEvent after accordion closing\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### Methods\n\nAfter 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.\n\nExample:\n\n```JavaScript\nconst kordion = new Kordion(\"[data-kordion]\");\n\n// Open all accordions by clicking on `\".show-all-in-container\"`\n// in the container with the class `.container`\nconst button = document.querySelector(\".show-all-in-container\")\nbutton.addEventListener(\"click\", () =\u003e {\n  kordion.showAll(\".container\");\n});\n```\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eMethod\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.createInstance(element)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eCreates an accordion instance. Returns an accordion instance.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.toggle(instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eToggle accordion. Accepts an accordion instance.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.show(instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAccordion Opening Method.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.showAll(container)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eMethod for opening all accordions in the specified container. Accepts a selector or DOM element of the container in which to search.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.showEverything()\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eMethod to open all accordions on a page.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.hide(instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAccordion closing method.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.hideNested(instance)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eMethod for closing child accordions.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.hideAll(container)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eMethod for closing all accordions in the specified container. Accepts a selector or DOM element of the container in which to search.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.hideEverything(thisSelector)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eMethod to close all accordions on a page. \u003ccode\u003ethisSelector\u003c/code\u003e takes a Boolean value, if \u003ccode\u003etrue\u003c/code\u003e, it will be called only for the accordions from which the call occurs, if \u003ccode\u003efalse\u003c/code\u003e, then for ALL accordions on the page, without reference to the accordion from which the call occurs. Default: \u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.off(eventName, handler)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRemove event handler\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.offAny(handler)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eRemove event listener that will be fired on all events\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.on(eventName, handler)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAdd event handler\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ekordion.replaceIcon(instance, hidden = true)\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eMethod for replacing an icon. Accepts an accordion instance and a boolean icon value:\u003cbr\u003e\n      \u003ccode\u003etrue\u003c/code\u003e = open accordion icon;\n      \u003cbr\u003e\n      \u003ccode\u003efalse\u003c/code\u003e = closed accordion icon.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Themes\n\n### `clear`\n\nThis 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.\n\n### `Default`\n\nStandard Kordion theme made with love for users.\n\n- \u003ca href=\"https://codepen.io/koirodev/pen/BaXMXLZ\" target=\"_blank\"\u003eCodepen\u003c/a\u003e\n- \u003ca href=\"//koirodev.github.io/kordion/demos/01-default.html\" target=\"_blank\"\u003eExample page\u003c/a\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eView screenshot\u003c/summary\u003e\n  \u003cimg src=\"images/01-default.png\" loading=\"lazy\" style=\"width: 100%; height: auto; max-height: 500px; object-fit: contain;\"\u003e\n\u003c/details\u003e\n\n### `Dark`\n\nDark theme for connoisseurs of greatness.\n\n- \u003ca href=\"https://codepen.io/koirodev/pen/ExqMYVK\" target=\"_blank\"\u003eCodepen\u003c/a\u003e\n- \u003ca href=\"//koirodev.github.io/kordion/demos/02-default-dark.html\" target=\"_blank\"\u003eExample page\u003c/a\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003eView screenshot\u003c/summary\u003e\n  \u003cimg src=\"images/02-default-dark.png\" loading=\"lazy\" style=\"width: 100%; height: auto; max-height: 500px; object-fit: contain;\"\u003e\n\u003c/details\u003e\n\n## Effects\n\n### `Line-By-Line`\n\nLine-by-line appearance of accordion content.\n\n\u003cdetails\u003e\n  \u003csummary\u003ePreview GIF\u003c/summary\u003e\n  \u003cimg src=\"images/line-by-line.gif\" loading=\"lazy\" style=\"width: 100%; height: auto; max-height: 500px; object-fit: contain;\"\u003e\n\u003c/details\u003e\n\n```JavaScript\nimport Kordion from \"kordion\";\n\nconst kordion = new Kordion(\"[data-kordion]\", {\n  theme: \"dark\",\n  effect: \"line-by-line\",\n  effectLineByLine: {\n    speed: 350,\n    easing: \"ease\",\n    delay: 20,\n    y: 50,\n  },\n});\n```\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eOption\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003espeed\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e350\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAnimation speed\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eeasing\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"cubic-bezier(.25,.1,.25,1)\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eAnimation timing function\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003edelay\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e30\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eDelay from previous to next element.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003escale\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.95\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe scale value from which the animation will start.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ey\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber/String\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e20\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe offset along the Y axis from which the animation will start.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003ex\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber/String\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe offset along the X axis from which the animation will start.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eopacity\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eNumber/String\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e0.6\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe opacity value at which the animation will start.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eclearProps\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e[\"transform\", \"opacity\", \"transition\"]\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eClearing props. Specifies which props will be cleared at the end of the animation. It is acceptable to enter a string or boolean values.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Plugin for `Vue.js`\n\nУстановка:\n\n```bash\n$ npm install kordion\n```\n\nИспользование:\n\n```HTML\n\u003cscript setup\u003e\nimport { Kordion, KordionCurrent, KordionContent, KordionIcon } from 'kordion/vue'\nimport 'kordion/css'\nimport 'kordion/theme/dark'\n\nconst kordionOptions = {\n  speed: 500,\n  theme: 'dark',\n}\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cdiv data-kordion-container\u003e \u003c!-- Not obligatory. Required for automatic closing to work. --\u003e\n    \u003cKordion \n      :options=\"kordionOptions\"\n      @show=\"console.log('show')\"\n      @hide=\"console.log('hide')\"\n      @before-show=\"console.log('before-show')\"\n      @before-hide=\"console.log('before-hide')\"\n      @after-show=\"console.log('after-show')\"\n      @after-hide=\"console.log('after-hide')\"\n    \u003e\n      \u003cKordionCurrent selector=\"button\" :attributes=\"{ type: 'button', title: 'open' }\"\u003e\n        \u003cspan\u003eOpen\u003c/span\u003e\n        \u003cKordionIcon value=\"sprite.svg#plus\" icons=\"plus, minus\" /\u003e \u003c!-- It is optional --\u003e\n      \u003c/KordionCurrent\u003e\n      \u003cKordionContent\u003e\n        \u003cp\u003eContent\u003c/p\u003e\n        \u003cp\u003eContent\u003c/p\u003e\n        \u003cp\u003eContent\u003c/p\u003e\n        \u003cp\u003eContent\u003c/p\u003e\n      \u003c/KordionContent\u003e\n    \u003c/Kordion\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n```\n\n### Kordion props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eoptions\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e{}\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe same parameters are passed as in core. It is forbidden to transmit events.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### Kordion events\nThe Kordion component supports all Kordion events except initialization events. For example:\n\n```HTML\n\u003cKordion @before-show=\"...\" @before-hide=\"...\" @after-hide=\"...\"\u003e\n```\n\n\n### KordionCurrent props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eselector\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"button\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eHTML button selector. It is allowed to pass any existing HTML selector.\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eattributes\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eObject\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e{}\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe attributes of the button. For example: \u003ccode\u003etype: \"button\"\u003c/code\u003e. It is allowed to transfer date attributes, etc.\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n### KordionIcon props\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003eProp\u003c/th\u003e\n      \u003cth\u003eType\u003c/th\u003e\n      \u003cth\u003eDefault\u003c/th\u003e\n      \u003cth\u003eRequired\u003c/th\u003e\n      \u003cth\u003eDescription\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003evalue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003e\"sprite.svg#icon\"\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003efalse\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eThe initial value of the icon\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003e\u003ccode\u003eicons\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eString\u003c/td\u003e\n      \u003ctd\u003e\u003c/td\u003e\n      \u003ctd\u003e\u003ccode\u003etrue\u003c/code\u003e\u003c/td\u003e\n      \u003ctd\u003eTwo icons separated by a comma. For example: \u003ccode\u003e\"plus, minus\"\u003c/code\u003e\u003c/td\u003e\n    \u003c/tr\u003e\n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n## Examples\n\nYou can see more detailed examples \u003ca href=\"//koirodev.github.io/kordion/demos/\" target=\"_blank\"\u003eby following the link\u003c/a\u003e.\n\n## FAQ\n\n### How to build ready files?\n\nIt's very simple. Make sure you are in the root of the repository and enter the commands in your terminal:\n\n```bash\n$ npm install\n$ npm run build\n```\n\nDone. The collected files are in the `./dist` directory.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoirodev%2Fkordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkoirodev%2Fkordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkoirodev%2Fkordion/lists"}