Neglected Pulse Machine

    js-accordion

    1.0.6 • Public • Published

    js-accordion

    npm version licence Build Status JavaScript Style Guide Coverage Status semantic-release

    Example

    Install

    npm i js-accordion --save

    In a browser:

    <script src="path/js/js-accordion.min.js"></script>
    <link href="path/css/js-accordion.min.css" rel="stylesheet">

    Load ES module:

    import "js-accordion/css/js-accordion.css"; //if is necesary.
    import Accordion from 'js-accordion';

    Usage

    you must import the style in html or script.

    html

    this structure with your id

    <dl id="accordion">
      <dt>Section 1</dt>
      <dd>
        <p>Section 1 Content...</p>
      </dd>
      <dt>Section 2</dt>
      <dd>
        <p>Section 2 Content...</p>
      </dd>
      <dt>Section 3</dt>
      <dd>
        <p>Section 3 Content...</p>
      </dd>
    </dl>

    Script

    import "js-accordion/css/js-accordion.css"; // es6 example
    import Accordion from 'js-accordion'
     
    const id = 'accordion'
    const accordion = new Accordion(id [, config]) // config is a optional param
     

    API

    config

    Attribute type default example description
    maxHeight String 'none' "150px" set max height of accordion content when is opened
    withTransition Boolean true true / false effect when open and close
    withAutoClose Boolean true true / false close others accordions than you not click
    onToggle Event () => {} (accordion) => {} event when one content of accordion is opened.

    variables

    • element : Root Accordion element
    • config : Accordion config
    • accordionItems: Array of Accordion Items, each accordion with heder and content.

    functions

    • update() : if you add new content, this update the accordion.
    • toggleAccordion(accordion): if you want use it in javascript pass a accordion to close or open.

    theme

    you can change the default theme changing this css variables.

      --accordion-header-fz: 16px;
      --accordion-header-icon-fz: 1.5em;
      --accordion-header-height: 2.2em;
      --accordion-header-padding: 0 1em;
      --accordion-border-width: 1px;
      --accordion-border-radius-width: 0px;
      --accordion-time-transition: 0.4s;
      --accordion-function-transition: ease-in-out;
     
      --accordion-header-background-color: #f0f0f0;
      --accordion-header-border-color: #444444;
      --accordion-header-text-color: #444444;
      --accordion-body-background-color: white;
      --accordion-body-border-color: #444444;
      --accordion-body-text-color: #444444;

    CI

    pipeline

    Branches Stages site
    Staging Staging heroku
    Master Production Github Pages

    Conditions

    • Use Sass for generate CSS
    • Use ES6
    • Use only Vanilla JS, without any JS framework
    • Generate gh-page for publish

    Bonus

    • Add new section with Ajax content

    Author

    Alex Marcos Gutierrez

    License

    MIT

    Install

    npm i js-accordion

    Homepage

    .

    DownloadsWeekly Downloads

    19

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    47.8 kB

    Total Files

    7

    Last publish

    Collaborators

    • alex-tmt