@gkd/reveal v1.0.1

Reveal

Reveal hides or reveals elements based on a checkbox, radio or option in select-box status.

Installation

First, install via NPM or Yarn

npm install --save-dev @gkd/reveal

Then, import Reveal in your JS / TS:

import Reveal from '@gkd/reveal';
const instance = new Reveal;

And add the following rule to your CSS:

[reveal]:not([aria-expanded="true"]):not(option):not(input) {
   display: none !important;
}

Usage

Reveal will check changes via the document change event. From there, it checks if the target is a checkbox, radio or option in select-box.

First, create a element with a reveal attribute and a identifier in this attribute:

<div reveal="section-1">Hidden content</div>

Then, create a select option, radio or checkbox with a reveal or hide attribute and add the identifier of the section you've just created:

<input type="checkbox" name="my-checkbox" id="checkbox-1" reveal="section-1">

Now, if you check the checkbox the content in the div will be visible. Otherwise, it will be hidden.

You can add multiple identifiers in the reveal attribute, separate them by a blank space.

Radio and select options

<input type="radio" id="radio-1" name="my-radio-group" reveal="section-1" checked>
<input type="radio" id="radio-2" name="my-radio-group" reveal="section-2">

<div reveal="section-1">Hidden content</div>
<div reveal="section-2">Hidden content</div>

<select name="my-select">
    <option value="1" reveal="section-3">Reveal section 3</option>
    <option value="2" reveal="section-4">Reveal section 4</option>
</select>

<div reveal="section-3">Hidden content</div>
<div reveal="section-4">Hidden content</div>

Hiding elements

You can also add a hide attribute to hide a element on checked:

<select name="my-select">
    <option value="1">Reveal section 2</option>
    <option value="2" hide="section-1">Reveal section 1</option>
</select>

<div reveal="section-1">Hidden content</div>

By default, section-1 div will be visible. When the second option is selected, the section-1 div will be hidden.

Callbacks and Events

You can access the events via the $events property on the instance of Reveal.

const instance = new Reveal;

Available events

change

instance.$events.on('change', payload => {
    console.log(payload);
});

// Payload:
{
    item,
    active,
    revealIdentifiers,
    hideIdentifiers,
    revealed,
    hidden
}

Callback

You can also use a callback per item. The callbacks are attached to the window. In your html, add a callback attribute to your reveal item:

<input type="checkbox" name="my-checkbox" id="checkbox-1" reveal="section-1" callback="myCallback">

In your javascript file:

window['myCallback'] = (payload) => {
    console.log(payload)
}

// Payload:
{
    item,
    active,
    revealIdentifiers,
    hideIdentifiers,
    revealed,
    hidden
}

Events and callbacks will fire everytime a item changes state.