Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A jQuery plugin for easily hiding and revealing related form fields conditionally.

branch: gh-pages

Update docs

latest commit a8dea7b4b9
Oliver Joseph Ash authored
Octocat-spinner-32 js Initial commit July 29, 2012
Octocat-spinner-32 .gitignore Initial commit July 29, 2012
Octocat-spinner-32 README.md Update docs September 09, 2012
Octocat-spinner-32 index.html Initial commit July 29, 2012
README.md

Form Accordion

A jQuery plugin for easily hiding and revealing related form fields conditionally.

Live Example

Take a look at an example.

Usage

The plugin follows a simple markup pattern: any children elements are treated as form rows. For example:

<form id="example-1">
  <div>
    <label></label>
    <input>
  </div>
  <div>
    <label></label>
    <input>
  </div>
  <div>
    <label></label>
    <input>
  </div>
</form>

Above is the initial required structure – a series of elements (form rows) wrapped in a container. This can be any combination of elements that has the same structure.

Once you have your markup, initialise the plugin:

$('#example-1').formAccordion(
  { auto: true
  }
);

Options

Form Accordion can take an optional paramater – an object of key/value options:

  • auto Boolean - Specifies whether or not to automatically apply behaivours to all form rows using default conditions (such as if input is not empty).
  • rows Object - Objects representing rows in the form. Key is the index of the row you want to target, value is the object of options for this row (see example).
  • animate Boolean - Specifies whether or not the hiding and revealing of form rows should be animated.
  • animationDuration Integer (ms) - The duration of the animation.

Example

$('#example-2').formAccordion(
  { auto: false
  , animate: true
  , animationDuration: 200
  , rows:
    {}
  }
);

By default, auto is disabled. The plugin expects that you will want to write your own tests.

Row Options

The options you may need to write your own tests are:

  • toggleNext Integer - The number of form rows following this row which should be hidden/revealed.
  • condition Function ($target, $el) - The condition that should be tested against for hiding/revealing the next row(s).
  • callback Function (condition, $target, $el) - Runs after each test.

Example

$('#example-2').formAccordion(
  { rows:
    { 0:
      { toggleNext: 4
      , condition: function ($target, $el) {
          return $target.is(':checked') && $target.val() !== 'disagree';
        }
      }
    , 2:
      { toggleNext: 2
      , condition: function ($target, $el) {
          return $target.val() !== '';
        }
      }
    }
  }
);

Requirements

  • jQuery (tested on 1.7)

Let's Make It Better

I would love to hear more about how to improve Form Accordion. Play with it and fork away. If you have any questions, contact me on Twitter.

License

Creative Commons License
Form Accordion by Oliver Joseph Ash is licensed under a Creative Commons Attribution 3.0 Unported License.
Based on a work at https://github.com/OliverJAsh/FormAccordion.

Something went wrong with that request. Please try again.