Kyle Peatt edited this page Jul 8, 2014 · 2 revisions
Clone this wiki locally


What is Bellows?

Bellows is a fast mobile-optimized accordion meant to make progressive disclosure easier on small screens. It animates smoothly to give context for additional content and is easy to include on any site.


  1. Tapping on a header should open and close a following containing block
  2. The container for the item should animate smoothly when opening and closing
  3. Have an option to have only a single content block open at a time
  4. Should be able to dynamically resize to fit content
  5. Should be able to work with multiple bellows inside of themselves.


  1. Auto-initializes with a data-attribute
  2. Fires events on every interaction
  3. Is unit-testable

Support Requirements

  1. Bellows hides and reveals content without animating

Optimized Requirements

  1. Bellows animates smoothly