https://github.com/lukestorry/nested-accordion
NPM package to generate a series of infinitely nested css accordions from a json datafile
https://github.com/lukestorry/nested-accordion
css html js json visualisation
Last synced: 11 months ago
JSON representation
NPM package to generate a series of infinitely nested css accordions from a json datafile
- Host: GitHub
- URL: https://github.com/lukestorry/nested-accordion
- Owner: LukeStorry
- License: mit
- Created: 2020-01-09T16:26:45.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-18T20:33:37.000Z (almost 3 years ago)
- Last Synced: 2025-03-11T02:18:32.940Z (about 1 year ago)
- Topics: css, html, js, json, visualisation
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/nested-accordion
- Size: 784 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# nested-accordion
[](https://www.npmjs.com/nested-accordion)
[](https://travis-ci.org/lukestorry/nested-accordion)
[](https://codecov.io/gh/lukestorry/nested-accordion/branch/master)
[](https://packagephobia.now.sh/result?p=nested-accordion)
Generates a series of nested accordions (using the details/summary elements) from a json datafile
---
## Install
$ yarn add nested-accordion
---
## Usage
#### Import:
```js
const nestedAccordion = require('nested-accordion');
```
#### `.create(data)` gives a html string with a nested-accordion div to be inserted in a website
```js
const nestedAccordionDiv = nestedAccordion.create(data)
```
#### Data should be an array of SectionData
Title is required, optional text and children.
If both text and children are ommitted, that child accordion will be diabled
```js
type SectionData = {
title: string;
text?: string;
children?: Array;
};
```
#### `.styles()`` gives a string with the css you should add to your site
Optional colour parameters default to grey boxes
```js
const styles = nestedAccordion.styles(
activeColour: 'grey',
inactiveColor: 'lightgrey',
textColor: 'black')
export css = `\n${styles}\n`
```
---
## Example
```js
const data = [
{
title: 'Grandparent 1',
text: 'Grandparent 1 description.',
children: [
{
title: 'Parent 1',
},
{
title: 'Parent 1',
children: [
{
title: 'First Child',
text: 'I am the first child',
},
{
title: 'Second Child',
text: 'I am the first child',
}
]}
]},
{
title: 'Grandparent 2',
text: 'Grandparent 2 description.',
children: [
{
title: 'Parent 3',
children: [
{
title: 'First Child',
text: 'I am the first child',
},
{
title: 'Second Child',
text: 'I am the first child',
}
]}
]}
];
const css = `${nestedAccordion.styles('cyan', 'lightcyan')}`
const div = nestedAccordion.create(data)
```
Then when the css string is put in the body of the page, and the div where you want the accordion to appear, to looks like:
### Live usage
This can be used to visualise large mind-map style datasets, for example on [this site looking tinto university courses](https://marniewoodmeade.co.uk/authenticlearning/).
---
## Bugs or updates
If you want to use this accordion for you project, but it isn't quite working, let me know and I'll see what I can do!
This was originally made for a specific purpose (visualisation of a json dataset for an eleventy-genreated website), so may not work in all scenarios yet!