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