Chunker

Breaks content (body text) into sections at header boundaries. This enables us to use collapsible fieldsets. tabs, vertical tabs or other jqueryUI style formatters like accordion to create in-page pagination automatically, while editors only have to write H2 (or h3) tags to trigger that behavior.

This can be applied over top of any existing body content, as part of the 'field display' settings. It can be applied retroactively to any content.

Currently working:
* Semantic chunking (just wraps additional divs around things in useful places - letting you style or indent subsections better.)
* Automatic heading anchors (optional)
* Collapsible fieldset style markup for page sections (even though that's an abuse of fieldsets, it's what Drupal does..)
* Stand-alone Horizontal or vertical tabs for page sections
* Integration with field_group . If you use the field_group vertical tabs, horizontal tabs or accordion layouts, you can insert page sections as individual tabs alongside the field_group tabs.
* A javascript-only numeric pager, that lets you navigate through pages using 'previous' and 'next' buttons, or jump to page (element) number. (Credits to jPaginate jQuery plugin for inspiration here)
* Custom mode - where you can choose the markup and classes that get applied to your wrappers.

Theory

This process runs in two main steps :

1. Chunks the content and re-arranges the markup semantically
2. Adds additional UI effects to the content

In the first, it transforms the 'flat' flow of normal editors simple heading markup:

h2  "Section 1"
p   "Section 1 intro content"
h3  "Section 1.1"
p   "Subsection of section 1"
h3  "Section 1.2"
p   "Another subsection of section 1"
h2  "Section 2"
p   "Section 2 content"

<h2>Section 1</h2>
<p>Section 1 intro content</p>
<h3>Section 1.1</h3>
<p>Subsection of section 1</p>
<h3>Section 1.2</h3>
<p>Another subsection of section 1</p>
<h2>Section 2</h2>
<p>Section 2 content</p>

And turns it into "Chunkier" but more hierarchical, semantic layout, where the higher sections actually contain the subsections instead of just preceding them:

h2      "Section 1"
..p     "Section 1 intro content"
..h3    "Section 1.1"
....p   "Subsection of section 1"
..h3    "Section 1.2"
....p   "Another subsection of section 1"
h2      "Section 2"
..p     "Section 2 content"

... This does involve adding more divs (or optional markup of your choice).

<div class="section depth-2" id="section-1">
  <h2>Section 1</h2>
  <div class="section-content depth-1">
    <p>Section 1 intro content</p>
    <div class="section depth-3" id="section-1-1">
      <h3>Section 1.1</h3>
      <div class="section-content depth-3">
        <p>Subsection of section 1</p>
      </div>
    </div>
    <div class="section depth-3" id="section-1-2">
      <h3>Section 1.2</h3>
      <div class="section-content depth-3">
        <p>Another subsection of section 1</p>
      </div>
    </div>
  </div>
</div>
<div class="section depth-1" id="section-2">
  <h2>Section 2</h2>
  <div class="section-content depth-1">
    <p>Section 2 content</p>
  </div>
</div>

What this enables however is for our core jquery-ui effects to instantly add hide/show/collapse behavior directly to sections, or for css to visually indicate the document structure (by boxing or indenting the contents)

Requirements

• Field Formatter Settings

See also

This works well with architectures like "Display Suite" and its "View mode switcher" - it could provide you with the ability to display a 'Tabbed" view of a page yet allow the user to also see it unpacked in one long page.