Skip to content

👁️ jQuery plugin that toggles visibility of HTML elements according to form input values

License

Notifications You must be signed in to change notification settings

ubermanu/furtive

Repository files navigation

jQuery - Furtive

A plugin that toggles visibility of HTML elements according to Form input values.

Getting started

Once you've included furtive.js and jQuery to your page, you can attach the Furtive watcher to a container.
All the form elements (input, select, textarea etc...) will trigger the watcher handler.

<div data-furtive-watch>

Conditions

Then, in your container you can attach some conditions to other elements.
The conditions are simple jQuery selectors.
If one of the selector matches, the condition is fulfilled and the element is displayed.
Note: The selectors must be in the main watcher scope, see above.

<div data-furtive-condition="#input:checked">

This example will show the <div> element if #input is checked

Conjunction

Sometimes it's necessary to have multiple conditions that MUST match.
It's possible to define the conjunction method between conditions.
The OR conjunction is used by default.

<div data-furtive-condition="#input:checked, #input2:checked"
     data-furtive-conjunction="and">

This example will show the <div> element if #input is checked and #input2 is checked too.

Options

Disable the auto-binding at start:

window.Furtive.autoBind = false

Keep form elements enabled when hidden:

window.Furtive.disableHidden = false