Accordion and Editable
Silky-smooth accordion and editable widgets with no external dependencies.
npm i componentsoftwaredesign-project
Usage
Include the following two files in your project:
src/accordion.css
src/accordion.js
src/editable.css
src/editable.js
Layout your markup like this:
<div class="accordion">
<div>
<h1> Heading </h1>
<div> Content </div>
</div>
<div>
<h1> Heading </h1>
<div> Content </div>
</div>
</div>
Options can be passed in a second argument:
new Accordion(el, {
onToggle: function(fold, isOpen){
console.log(fold); // -> Reference to a `Fold` instance
console.log(isOpen); // -> true / false
}
});
Styling
The base stylesheet is located at src/accordion.css
.
Embed it into your application's existing styling, tweaking it if desired.
Using ES6 modules
If your project uses native JavaScript modules, consider loading src/accordion.mjs
instead:
<!-- ES6+ -->
<script type="module">
import Accordion from "./src/accordion.mjs";
for(const el of document.querySelectorAll(".accordion"))
new Accordion(el);
</script>
The old accordion.js
file contains only ES5, and can be used as a fallback for older platforms which lack ES module support:
<!-- Fallback to ES5 for legacy browsers -->
<script nomodule src="src/accordion.js"></script>
<script nomodule>
"use strict";
var accordions = document.querySelectorAll(".accordion");
for(var i = 0, l = accordions.length; i < l; ++i)
new Accordion(accordions[i]);
</script>
IE8 support
For IE8-9 compatibility, install fix-ie
:
npm install fix-ie --save
bower install fix-ie --save
Options
Name | Type | Default | Description |
---|---|---|---|
[toggleExpand] | Boolean | "false" |
Expand of the accordion |
[inputValue] | String | undefined |
Value for editable |
[toggleEditable] | Boolean | "false" |
Editable toggle |