To make an accordion UI.
yarn add acoru
npm i -S acoru
Or access to releases page. Then, download the latest version.
if you read as a separate file.
<script src="https://unpkg.com/acoru/dist/acoru.js"></script>
<!-- or -->
<script src="/path/tp/acoru.js"></script>
Markup and script are like this.
<div id="vertical" data-acoru-axis="vertical" data-acoru-mode="single">
<div data-acoru-for="name1">name1</div>
<div data-acoru-id="name1" style="display:none">...</div>
<div data-acoru-for="name2">name2</div>
<div data-acoru-id="name2" style="display:none">...</div>
</div>
Like label[for]
and input[id]
, for example click on [data-acoru-for=name]
to open [data-acoru-id=name]
.
[data-acoru-id]
is first hidden by [style='display:none']
.
Whether to open vertically or horizontally.
Try to open only one, Do you want to open multiple.
If an ancestor has an element that has this element, it is considered a parent. Otherwise, we consider the next higher element as parent.
The following classes come with timing.
open
Before opening, open elementopened
After opening, open the elementclose
After closing, close element
Especially in the case of markup like this, I think that it will be necessary to control the style using classes.
<div id="vertical">
<!-- One deep -->
<div>
<div data-acoru-for="name1">name1</div>
<div data-acoru-id="name1" style="display:none">...</div>
</div>
<div>
<div data-acoru-for="name2">name2</div>
<div data-acoru-id="name2" style="display:none">...</div>
</div>
</div>
When the parent ([data-acoru-parent]
) element is in overflow:hidden
state, the size of each accordion item is adjusted so that it does not jump out of parent.
// For es
// import Acoru from 'acoru';
const acoru = new Acoru(document.getElementById('vertical'));
acoru.init();
acoru.on('opened', collection => console.log('opened ' + collection.name));
Process elements below baseElement
.
Initial processing.
Register a function to be executed at a certain timing. It has the following.
open
Before opening anyopened
After opening anyclose
Before closing anyclosed
After closing any
Open the name
item.
Close the name
item.
Discard processing related to Acoru
test/fixtures/
example/webpack/
The MIT License (MIT)
Copyright (c) 2017 nju33 [email protected]