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 :
- Chunks the content and re-arranges the markup semantically
- 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
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.
Project information
- Minimally maintained
Maintainers monitor issues, but fast responses are not guaranteed. - Maintenance fixes only
Considered feature-complete by its maintainers. - Module categories: Content Display, Developer Tools
- 65 sites report using this module
- Created by dman on , updated
- Stable releases for this project are covered by the security advisory policy.
Look for the shield icon below.
Releases
Drupal 10 compatibility
Development version: 2.x-dev updated 21 Sep 2023 at 02:22 UTC
Reworked config settings storage. Not forward-compatible from older versions!
Development version: 7.x-1.x-dev updated 14 May 2017 at 12:48 UTC