toggleForm

Very simple plugin that shows/hides forms associated with editing bits of data. Useful for a screen where you might have multiple forms, like an account settings screen.

View Example.

Requirements

jQuery (>= 1.7)

Usage

<!-- HTML -->

<div class="some-div">
    
    <div class="data">
        <dl>
            <dt>First Name:</dt>
            <dd>Joe</dd>
            <dt>Last Name:</dt>
            <dd>Smith</dd>
        </dl>
        <button type="button" class="edit" data-toggle="#customerForm">Edit</button>
    </div>
    
    <div class="form" id="customerForm">
        <form>
            <p><label>First Name:</label>
                <input type="text" value="Joe" /></p>
            <p><label>Last Name:</label>
                <input type="text" value="Smith" /></p>
            <p>
              <button type="button" class="cancel">Cancel</button>
              <button type="submit">Submit</button>
            </p>
        </form>
    </div>
    
</div>

Note: each "edit" button requires a data-toggle attribute with a value of # + the id of the form container it should show

//JavaScript

$('.some-div').toggleForm(options);

Note: options is an optional javascript object with parameters explained below.

Options

Option	Default	Description
edit	button.edit	selector for your "edit" button, or the element intended to show the form when clicked
cancel	button.cancel	selector for your "cancel" button, or the element intended to hide the form when clicked
data	.data	selector for your "data" container element
form	.form	selector for your "form" container element
close	close	css class name for the "close [x]" button
hideOtherForms	true	whether or not other to hide all other toggleForms when another "edit" button is clicked, so only one form is visible at a time.

//example

$('.some-div').toggleForm({
	edit: 'button.edit',
	cancel: 'button.cancel',
	data: '.data',
	form: '.form',
	close: 'close',
	hideOtherForms: true
});

Methods

• showData hides the "form" container and "close [x]" button and shows the "data" container

   $('.some-div').toggleForm('showData');

• showForm hides the "data" container and shows the "close [x]" button and "form" container

   $('.some-div').toggleForm('showForm');

• destroy removes the "close [x]" button, shows the "data" and "form" containers, unbinds click events for "edit" and "cancel" buttons

   $('.some-div').toggleForm('destroy');