@odyzeo/toggle

Odyzeo toggle helper

Usage no npm install needed!

<script type="module">
  import odyzeoToggle from 'https://cdn.skypack.dev/@odyzeo/toggle';
</script>

README

zeo-toggle

Installation

npm i zeo-toggle

or

yarn add zeo-toggle

Usage

<style>
    .js-toggle-element {
        height: 0; /* Remove when you want toggle already open */
        overflow: hidden;
        transition: height .2s;
    }
</style>
<button data-toggle=".js-toggle-element">
    Click
</button>
<div class="js-toggle-element">
    Lorem ipsum dolor sit amet
</div>
import toggle from 'zeo-toggle';
toggle();

Options

Attribute Required Description Default
data-toggle REQUIRED selector for search in scope '.js-toggle-element'
data-toggle-scope OPTIONAL scope to search toggle element use selector to find closest parent [this, document, .selector] document
data-toggle-mode OPTIONAL mode for toggling [click, hover] 'click'
data-toggle-off-click OPTIONAL off click close toggle element false
data-toggle-group OPTIONAL enables only one element active at time false

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint