Easy Accordion Getting Started and Demos

This accordion sample dose not depend on a specific library.

Demos

Simple

HTML view source

Group

HTML view source

Free Trigger

Accordion1 title

Accordion1 contet.

Accordion2 title

Accordion2 contet.

Accordion3 title

Accordion3 contet.

HTML view source

Nested

HTML view source

Simple Modal

Modal Open
HTML view source

Pulldown Menu

Accordion1 title

Accordion1 contet.

Accordion2 title

Accordion2 contet.

Accordion3 title

Accordion3 contet.

HTML view source

Getting statrted

1. Download and install

First of all we need to download required files.

  • We can download them from GitHub repository
  • Or we can install them via npm in terminal.
$ npm install easy-accordion

Use files in the dist/ folder.

2. Include Files To Website

After that we need to include JS files to our website. In your html file.

Bundled css is just sample. You need to define css by yourself.

<!DOCTYPE html>
<html lang="en">
<head>
    ...
    <link rel="stylesheet" href="path/to/yourStyle.css">
</head>
<body>
    ...
    <script src="path/to/EasyAccordion.js"></script>
</body>
</html>

3. Add Accordion HTML Layout

Now, we need to add basic layout to our website.

Reffer to below documents

Document

HTML

Toggle Trigger

  • Set class js-accordionto the accordion trigger element.
  • is-active class is added to trigger and content block at open.
  • * You have to define styles for them.
Example
Accordion Title
Accordion Content
Options
Parameter Example Default Description
target data-target="#hoge" (next block)

Set selector of accordion content block to open and close.
If not set, the block next to trigger is automatically applied.

data-target="hoge"

group data-group=".hoge" (none)

Set selector of wrapper block.
If set, one accordion is opened and the others are closed.

data-group="hoge"

scroll data-scroll="1" (none)

If set "1", scrolled to trigger block at open.
If not set or set other values, not scrolled.

If set with group, scroll to top of triggers group.

active_class data-active_class="active" is-active Use this, if you need to change class name indicating active status.
content_class data-content_class="hoge" accordion-content Use this, if you need to change class name of accordion content block.

Close Trigger

  • Set class js-accordion-closeto the accordion close trigger element.
  • is-active class is deleted from trigger and content block.
  • * You have to define styles for them.
Example
Accordion Title
Accordion Content close
Options
Parameter Example Default Description
trigger data-trigger="#hoge" (none)

Set selector of accordion trigger element to open and close.

This is required item. You have to set this parameter.

data-target="hoge"

scroll data-scroll="1" (none)

If set "1", scrolled to trigger block at close.
If not set or set other values, not scrolled.

ignore data-ignore=".hoge" (none) Use this, if you set block not to close in trigger block.

Select Trigger

  • Set class js-accordion-selectto select tag.
  • And Set accordion target selector to value of options.
  • is-active class is added to trigger and content block at open.
  • * You have to define styles for them.
Example

Accordion1 contet.

Accordion2 contet.

Accordion3 contet.

Options

Refer to above.

JavaScript

Please add below script into the script file loaded commonly.

view source

CSS

is-active class is added trigger and content block at open.

This library dosen't provide styles.
You have to define styles for them.