expander helpers

Example

<div>
  This mid-century modern desk glows from a
    glorious meeting of stainless steel and rosewood.</div>
<div <%= collapsed('full_description')%>>
  This is where we put a very long description of the desk
  that would clutter the page if we left it visible by default.
</div>
<div <%= expander('full_description')%>> See More </div>
<div <%= collapser('full_description')%>> See Less </div>

Expanders Consist of 2 or 3 parts

1. Either a collapsed or an expanded section, which is the toggle-able content.
2. An expander, which is the trigger to expand content when collapsed.
3. An optional collapser, which is the trigger to collapse the content when expanded.

If no collapser is defined, the expander remains in place in both states and acts as a toggle trigger.

All the Options

expander(label, expand_class: nil, collapse_class: nil)

The label ties an expander to toggle-able content (either expanded or collapsed content).

The expand_class is added to the expander when the associated content is expanded, and removed when the content is collapsed. This option only applies when no collapser is used.

The collapse_class is added to the expander when the associated content is collapsed, and removed when the content is expanded. This option only applies when no collapser is used.

collapser(label)

The label ties a collapser to toggle-able content (either expanded or collapsed content).

nb. if a collapser is used, no classes are necessary since the expander and collapser are alternately hidden/shown as triggers for expanding/collapsing.

collapsed(label, type: nil, expand_class: nil, collapse_class: nil)

This helper will cause the toggle-able content to be collapsed initially.

The label ties the content to its triggers (expander / collapser).

If type is set to :ajax, the content will be pulled via ajax. This requires Thin Man

The expand_class is added to the content element when it is expanded.

The collapse_class is added to the content element when it is collapsed.

expanded(label, type: nil, expand_class: nil, collapse_class: nil)

This helper will cause the toggle-able content to be expanded initially.

The label ties the content to its triggers (expander / collapser).

If type is set to :ajax, the content will be pulled via ajax. This requires Thin Man

The expand_class is added to the content element when it is expanded.

The collapse_class is added to the content element when it is collapsed.

Trigger Class Example

<div <%= expander('full_description', expand_class: 'trigger-expanded')%>>
 Full Details
</div>
<div <%= collapsed('full_description')%>>
 This is where we put all the details that would clutter
 the page if we left them visible by default...
</div>

In this example, the trigger-expanded class could change an :after side-arrow to a down-arrow, or it could change a '+' to a '-'. This allows you to use css to transition the trigger state.