npm

Need private packages and team management tools?Check out npm Orgs. »

@baianat/accordion

0.0.1 • Public • Published

Accordion

ES6 accordion extension for Base framework.

Getting Started

Installation

You can install accordion as part of base.extensions

npm install @baianat/base.extensions
 
# or using yarn 
yarn add @baianat/base.extensions

If you want the standalone version

npm install @baianat/accordion
 
# or using yarn 
yarn add @baianat/accordion

Include necessary files

<head>
  <link rel="stylesheet" href="dist/css/accordion.css">
</head>
<body>
    ...
    <script type="text/javascript" src="dist/js/accordion.js"></script> 
</body>

HTML Layout

  • .accordion
    • .accordion-item
      • .accordion-title
        • .accordion-icon
      • .accordion-body
    • .accordion-item
      • ...
<ul class="accordion" id="myAccordion">
  <li class="accordion-item is-active">
    <a class="accordion-title">
      <span class="accordion-icon"></span>
      Title 1
    </a>
    <div class="accordion-body">
      <p> Awesome content! </p>
    </div>
  </li>
 
  <li class="accordion-item is-active">
    <a class="accordion-title">
      <span class="accordion-icon"></span>
      Title 2
    </a>
    <div class="accordion-body">
      <p> Awesome content! </p>
    </div>
  </li>
 
  <li class="accordion-item is-active">
    <a class="accordion-title">
      <span class="accordion-icon"></span>
      Title 3
    </a>
    <div class="accordion-body">
      <p> Awesome content! </p>
    </div>
  </li>
</ul>

If you want the clean version of accordion add .is-clean class to main div

  <ul class="accordion is-clean" id="myAccordion">
    ...
  </ul>

Make it work

One last step is to call create new accordion

  let myAccordion = new Accordion('#myAccordion');

You can use the static method Accordion.create to search for all accordions in the page and create a new instant of it.

  Accordion.create();

License

MIT

Copyright (c) 2017 Baianat

Keywords

none

install

npm i @baianat/accordion

Downloadsweekly downloads

3

version

0.0.1

license

MIT

last publish

collaborators

  • avatar
  • avatar
Report a vulnerability