Guinguette.js

The accordion plugin that smells good the french baguette

Introduction

Guinguette.js is a lightweight accordion plugin written in ES6

• No dependencies required
• No extra files to download
• Simple API
• Keyboard navigation ready

Documentation

Install

Method	Procedure
NPM	npm i guinguette
Download	Download zip

Then guinguette have some css you will have to add (feel free to custom it for a better integration in your UI):

<link rel="stylesheet" href="dist/guinguette.css">

Finally just link the guinguette's code at the end of your document:

<script src="dist/guinguette.js"></script>

Use

Instanciate new accordion

var guinguette = new Guinguette(document.querySelector('[data-guinguette="container"]'))

First parameter is for your content's container. Then you'll have to add data-guinguette-title and data-guinguette-content attributes to each section you want to become an accordion. Like that for example:

<div data-guinguette="container">
    <h2 data-guinguette-title>Wow Guinguette.JS is so usefull</h2>
    <div data-guinguette-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </div>
    <h2 data-guinguette-title>Why Guinguette.JS is so easy to setup</h2>
    <div data-guinguette-content>
        Sed ut elit facilisis, egestas quam a, ultrices lectus. Ut dictum sit amet lectus vel eleifend.
    </div>
</div>

Options

Option	Default value	Description
autoCollapse	false	Open only one accordion at a time
anchorOpen	true	If a title's id match with a the URL's anchor, it'll be open by default

You can use it like that:

var guinguette = new Guinguette(document.querySelector('[data-guinguette="container"]'), {
    autoCollapse: true
})

API

Name	Description
expand(int)	Open an accordion
collapse(int)	Close an accordion
expandAll()	Open all accordions
collapseAll()	Close all accordions

Hack guinguette.js

1. Install dependencies with npm: npm install
2. Generate assets with gulp
3. Launch a local server that monitor changes with gulp watch