Collapsible forms with jQuery

I spent a few hours recently refactoring the TickTickDone javascript to reduce code duplication. In the process, I generalised out a common pattern – a link that, when clicked disappears and is replaced with a form. If the form is cancelled or submitted, the form disappears and the link returns. An example can be found in the “Add a new milestone” button on the goal page of TickTickDone. I’ve packaged up the HTML template and the javascript, and linked them below. To use it, create your HTML page with a section following the format in collapse-form.html. Include collapse-form.js, and call the following in your javascript init:


Collapsible forms version 1:



Share and Enjoy:
  • Facebook
  • StumbleUpon
  • Twitter

If you enjoyed this post, you might also like...


Leave a Reply

CommentLuv Enabled