This tag, when given a list, chunks the list using the jQuery-UI accordion.

If you do not specify the chunker attribute, the list is chunked into sections of equal length. The default is 20 items, but that may be adjusted by setting the per-section attribute.

The chunker may be passed a block to specify custom chunking. This block is passed to Enumerable#chunk For example, to divide a sorted list of users based on the first letter of their name:

<accordion-collection:users chunker="&Proc.new{|u| u.name[0..1]}"/>

The scoped variable chunk is set to the chunker output. If you didn’t specify the chunker, it’s set to the chunk number. In the example above, it would be set to the first letter of the user’s name. Here’s an example of it being used to customize the chunk heading:

<heading:>Section <%= scope.chunk %></heading:>

The context is set to the chunked list for all parameters. This allows us to further customize the heading:

<header:><name:first/> &mdash; <name:last/></header:>

Replacing the collection with a table is easy:

<default:><table fields="this,email"/></default:>

Remember that the default parameter is a list, even if you set per-section=”1”. The easiest way to explode a list is with <repeat>:

<accordion-collection per-section="1">
      This is my content: <view/>


  • header-wrapper
    • header
  • default
    • collection


This tag uses Enumerable#chunk, which is only available with Ruby 1.9.2 and later. If you are using Ruby 1.8.7, you must include the backports gem in your project.


  • per-section, chunker: (see above). Only one of these should be used. Using neither results is the same as saying per-section=”20”

  • sortable: if set, the accordion is sortable, although the sort order is not saved.

Show Source

Edit this page