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 asif 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
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.