\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
\n| Option | \nType | \nDefault | \nDescription | \n
|---|---|---|---|
speed | \n Number | \n350 | \n The speed of the animation when opening and closing the accordion. | \n
theme | \n String | \n\"clear\" | \n Theme setup. Requires connection of styles of the selected theme. By default, kordion does not use themes. | \n
autoClose | \n Boolean | \nfalse | \n Automatically close accordions in one container when opening a new accordion. To do this, you must additionally add a container selector to the markup. | \n
autoCloseNested | \n Boolean | \nfalse | \n Automatically close child accordions when opening a second child accordion in one parent accordion. | \n
spritePath | \n String | \n\"sprite.svg\" | \n Path to sprite with icons, for automatic icon replacement when opening and closing accordion. | \n
getKordionHeight | \n Boolean | \nfalse | \n When set to true, it will use the height of the accordion, not the content inside. | \n
container | \n Object | \n[\"[data-kordion-container]\", \".section\"] | \n Container selectors, multiple selectors allowed. Used when autoClose: true. | \n
parent | \n String | \n\"[kordion-parent]\" | \n Added automatically to the parent accordion. Does not require prior specification in HTML markup. Only data attribute is allowed. | \n
current | \n String | \n\"[data-kordion-current]\" | \n Accordion opening button selector. Any type of selector is allowed. | \n
icon | \n String | \n\"[data-kordion-icon]\" | \n 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. | \n
hidden | \n String | \n\"[data-kordion-hidden]\" | \n Technical content wrapper selector. Any type of selector can be used. | \n
content | \n String | \n\"[data-kordion-content]\" | \n Primary content selector. Any type of selector can be used. | \n
activeClass | \n String | \n\"js-kordion-active\" | \n Active accordion class. Set on accordion after opening animation starts and removed when closing animation starts. | \n
openedClass | \n String | \n\"js-kordion-opened\" | \n Class for a fully expanded accordion. Set to hidden after the opening animation ends, and unset when the closing animation starts. | \n
disabledClass | \n String | \n\"js-kordion-disabled\" | \n Class for disabling interaction with accordion content when it is opened or closed. Set automatically to content | \n
effect | \n String | \n\n | Register the animation of opening and closing the accordion. Currently there is only line-by-line animation. | \n
effectLineByLine | \n Object | \n\n | An object with line-by-line animation parameters.\n | \n
events | \n Object | \n\n | Register event handlers | \n
| Group | \nName | \nArguments | \nDescription | \n
|---|---|---|---|
before | \n |||
init | \n (kordion) | \n Event before accordion initialization | \n|
show | \n (kordion, instance) | \n Event before the opening of the accordion | \n|
hide | \n (kordion, instance) | \n Event before accordion closing | \n|
on | \n |||
init | \n (kordion) | \n Event immediately after accordions are initialized | \n|
show | \n (kordion, instance) | \n Event during the opening of the accordion | \n|
hide | \n (kordion, instance) | \n Event during the closing of the accordion | \n|
after | \n |||
init | \n (kordion) | \n Event after accordion initialization | \n|
show | \n (kordion, instance) | \n Event after the opening of the accordion | \n|
hide | \n (kordion, instance) | \n Event after accordion closing | \n
| Method | \nDescription | \n
|---|---|
kordion.createInstance(element) | \n Creates an accordion instance. Returns an accordion instance. | \n
kordion.toggle(instance) | \n Toggle accordion. Accepts an accordion instance. | \n
kordion.show(instance) | \n Accordion Opening Method. | \n
kordion.showAll(container) | \n Method for opening all accordions in the specified container. Accepts a selector or DOM element of the container in which to search. | \n
kordion.showEverything() | \n Method to open all accordions on a page. | \n
kordion.hide(instance) | \n Accordion closing method. | \n
kordion.hideNested(instance) | \n Method for closing child accordions. | \n
kordion.hideAll(container) | \n Method for closing all accordions in the specified container. Accepts a selector or DOM element of the container in which to search. | \n
kordion.hideEverything(thisSelector) | \n 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 | \n
kordion.off(eventName, handler) | \n Remove event handler | \n
kordion.offAny(handler) | \n Remove event listener that will be fired on all events | \n
kordion.on(eventName, handler) | \n Add event handler | \n
kordion.replaceIcon(instance, hidden = true) | \n Method for replacing an icon. Accepts an accordion instance and a boolean icon value: \n true = open accordion icon;\n \n false = closed accordion icon. | \n
![](\"images/01-default.png\")
\n![](\"images/02-default-dark.png\")
\n![](\"images/line-by-line.gif\")
\n| Option | \nType | \nDefault | \nDescription | \n
|---|---|---|---|
speed | \n Number | \n350 | \n Animation speed | \n
easing | \n String | \n\"cubic-bezier(.25,.1,.25,1)\" | \n Animation timing function | \n
delay | \n Number | \n30 | \n Delay from previous to next element. | \n
scale | \n Number | \n0.95 | \n The scale value from which the animation will start. | \n
y | \n Number/String | \n20 | \n The offset along the Y axis from which the animation will start. | \n
x | \n Number/String | \n0 | \n The offset along the X axis from which the animation will start. | \n
opacity | \n Number/String | \n0.6 | \n The opacity value at which the animation will start. | \n
clearProps | \n Object | \n[\"transform\", \"opacity\", \"transition\"] | \n Clearing props. Specifies which props will be cleared at the end of the animation. It is acceptable to enter a string or boolean values. | \n
Content
\nContent
\nContent
\nContent
\n| Prop | \nType | \nDefault | \nRequired | \nDescription | \n
|---|---|---|---|---|
options | \n Object | \n{} | \n false | \n The same parameters are passed as in core. It is forbidden to transmit events. | \n
| Prop | \nType | \nDefault | \nRequired | \nDescription | \n
|---|---|---|---|---|
selector | \n String | \n\"button\" | \n false | \n HTML button selector. It is allowed to pass any existing HTML selector. | \n
attributes | \n Object | \n{} | \n false | \n The attributes of the button. For example: type: \"button\". It is allowed to transfer date attributes, etc. | \n
| Prop | \nType | \nDefault | \nRequired | \nDescription | \n
|---|---|---|---|---|
value | \n String | \n\"sprite.svg#icon\" | \n false | \n The initial value of the icon | \n
icons | \n String | \n\n | true | \n Two icons separated by a comma. For example: \"plus, minus\" | \n