/vanilla-js-accordion

Primary LanguageJavaScriptMIT LicenseMIT

A vanilla JS accordion

A vanilla javascript accordion with some cool features. A once in a lifetime experience.

Features

  • Shows contents of a panel when its header is clicked
  • Multiple panels can be open at once if toggle is switched on
  • Loads ajax content in one of the panels for a bonus point
  • Uses a minimal vanilla js state management library by @andybelldesign
  • Live reload in development
  • Webpack
  • Sass compilation (and minification/autoprefixing in production)
  • ES6+ transpilation (and minification/uglyfication in production)
  • ES Modules

Usage

  • Install dependencies
yarn
  • Run development server
yarn dev

Will open your default browser to http://localhost:8080/public

Webpack will watch for changes in the ./src directory and output the bundled assets to ./public/assets. In parallel, the development server will watch for changes in the ./public directory and live reload the browser.

  • Run tests
yarn test

Some basic tests using Jest have been added.

  • Build production bundles
yarn build

Will compile, minify and autoprefix Sass to CSS. Will Minify and uglify JavaScript and output the bundled assets to ./public/assets.

After building for production you can take the ./public directory and deploy it.

Live demo

A live demo should be available here.

  • Jordi Munoz @jordevo