How do I collapse this form when clicking the “.submit” button?

[KzHoNe]

I have a collapsible (enter your credit card info) form. When I click it it opens, but when I click submit I want it to close. Here's my html: \[code\]<div class= "addStuff"><div data-role="collapsible" data-inset="true" id="ccdiv"> <h5> New credit card</h5> <div data-role="fieldcontain"> <form id = "myForm"> <input type="password" name="credit_card_number" id="credit_card_number" value="" placeholder="Credit Card Number"> <input type="password" name="security_code" id="security_code" value="" placeholder="Security Code"> <input type="date" name="expiration_date" id="expiration_date" value="" placeholder="Expiration Date"> <input type="password" name="name" id="name" value="" placeholder="Name On Card"> <input type="password" name="street_address" id="street_address" value="" placeholder="Street Address"> <input type="text" name="city" id="city" value="" placeholder="City"> <input type="number" name="zip_code" id="zip_code" value="" placeholder="Zip Code"> <button type="button" class="submit" name="submit" value="http://stackoverflow.com/questions/13845635/submit">Submit</button> </form> </div></div>\[/code\]And here is my JS attempt: \[code\]$(document).ready(function() {$('.submit').click(function(){ var creditcard = $('#credit_card_number').val(); $('.accounts #CreditCards div[data-role="content"] #swipeMe').append('<li data-swipeurl="#" ><a href="http://stackoverflow.com/questions/13845635/#">' + creditcard + '</a></li>'); // refresh view $('#CreditCards ul').listview('refresh'); // hide form $('#myForm').slideUp(); $('#myForm').trigger('collapse'); });});\[/code\]