fa-accordion

Very light and customizable accordion that work without JS but only CSS.

In this way it is very performing.

You can customize the element using the CSS-Variables

Using this component

Node Modules with React

• Run npm install fa-accordion
• Add in index.js import { defineCustomElements } from 'fa-accordion/loader'; and defineCustomElements(window); like in this example:

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';

  import { defineCustomElements } from 'fa-accordion/loader';
  ReactDOM.render(<App />, document.getElementById('root'));

  defineCustomElements(window);

  serviceWorker.unregister();

• Import the component using import 'fa-accordion' when you want to use it like in this example:

  import React from 'react';
  import './App.css';

  import 'fa-accordion'

  function App() {
    return (
      <div>
        <fa-accordion text="titolo 1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nibh vitae interdum feugiat. Aenean at mattis sem, ac interdum risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ipsum lacus, feugiat ut sagittis sed, lobortis eget magna. Suspendisse at sapien lacus. Proin et porttitor metus. Nulla auctor consectetur justo ut tempor. Etiam quis faucibus dolor. Sed rutrum ullamcorper risus, ac auctor nulla lobortis et. Aliquam quis libero ac dolor interdum bibendum sit amet vel tellus. Praesent non nunc ac quam facilisis maximus ut in quam. Aliquam nec molestie urna, sed congue erat.
        </fa-accordion>
        <fa-accordion text="titolo 1">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dapibus nibh vitae interdum feugiat. Aenean at mattis sem, ac interdum risus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus ipsum lacus, feugiat ut sagittis sed, lobortis eget magna. Suspendisse at sapien lacus. Proin et porttitor metus. Nulla auctor consectetur justo ut tempor. Etiam quis faucibus dolor. Sed rutrum ullamcorper risus, ac auctor nulla lobortis et. Aliquam quis libero ac dolor interdum bibendum sit amet vel tellus. Praesent non nunc ac quam facilisis maximus ut in quam. Aliquam nec molestie urna, sed congue erat.
        </fa-accordion>
      </div>
    );
  }

  export default App;

In a stencil-starter app

• Run npm install fa-accordion --save
• Add an import to the npm packages import fa-accordion;
• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install fa-accordion
• Put a script tag similar to this <script src='node_modules/fa-accordion/dist/fa-accordion.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, html etc