MODX: auto create Foundation CSS tabs from a container's child ressources using getResources. Copy & paste example.

README - Foundation Tabs in MODX.md

Call

[[*isfolder:is=`1`:then=`
    <dl class="tabs" data-tab>
    [[!getResources?  
        &parent=`[[*id]]`
        &tpl=`fdTabTpl`
        &tplFirst=`fdTabTpl_first`
        &limit=`0`  
        &sortdir=`ASC`  
        &includeContent=`1`   
        &depth=`0`  
        &sortby=`menuindex`
        &showHidden=`0`
    ]] 
    </dl>

    <div class="tabs-content">
    [[!getResources?  
        &parent=`[[*id]]` 
        &tpl=`fdPaneTpl`  
        &tplFirst=`fdPaneTpl_first`
        &limit=`0`  
        &sortdir=`ASC`  
        &includeContent=`1`   
        &depth=`0`  
        &sortby=`menuindex`  
        &showHidden=`0`
    ]]
    </div>
`]]

• type: html/snippet call

• function: automatically generate tabs and panes from a MODX Revolution container's child ressources using getResources

---

Tabs

fdTabTpl_first (first, active tab)

<dd class="active"><a href="[[~[[+id]]]]#[[+id]]"><i class="[[+link_attributes]]"></i> [[+pagetitle]]</a></dd>

• type: chunk

• function: template for the first tab

fdTabTpl_first (other tabs)

<dd><a href="[[~[[+id]]]]#[[+id]]"><i class="[[+link_attributes]]"></i> [[+pagetitle]]</a></dd>

• type: chunk

• function: template for all other tabs

---

Panes

fdPaneTpl_first (first, active pane)

<div class="content active" id="[[+id]]">
    <h3 class="tab_heading">[[+longtitle]]</h3>
    <p>[[+content]]</p>
</div>

• type: chunk

• function: template for the first content pane

fdPaneTpl (other panes)

<div class="content" id="[[+id]]">
    <h3 class="tab_heading">[[+longtitle]]</h3>
    <p>[[+content]]</p>
</div>

• type: chunk

• function: template for all other content panes

fdPaneTpl.html

<div class="content" id="[[+id]]">
    <h3 class="tab_heading">[[+longtitle]]</h3>
    <p>[[+content]]</p>
</div>

fdPaneTpl_first.html

<div class="content active" id="[[+id]]">
    <h3 class="tab_heading">[[+longtitle]]</h3>
    <p>[[+content]]</p>
</div>

fdTabTpl.html

<dd><a href="[[~[[+id]]]]#[[+id]]"><i class="[[+link_attributes]]"></i> [[+pagetitle]]</a></dd>

fdTabTpl_first.html

<dd class="active"><a href="[[~[[+id]]]]#[[+id]]"><i class="[[+link_attributes]]"></i> [[+pagetitle]]</a></dd>

template.html

[[*isfolder:is=`1`:then=`
    <dl class="tabs" data-tab>
    [[!getResources?  
        &parent=`[[*id]]`
        &tpl=`fdTabTpl`
        &tplFirst=`fdTabTpl_first`
        &limit=`0`  
        &sortdir=`ASC`  
        &includeContent=`1`   
        &depth=`0`  
        &sortby=`menuindex`
        &showHidden=`0`
    ]] 
    </dl>

    <div class="tabs-content">
    [[!getResources?  
        &parent=`[[*id]]` 
        &tpl=`fdPaneTpl`  
        &tplFirst=`fdPaneTpl_first`
        &limit=`0`  
        &sortdir=`ASC`  
        &includeContent=`1`   
        &depth=`0`  
        &sortby=`menuindex`  
        &showHidden=`0`
    ]]
    </div>
`]]

it's the MODX Content Management Framework http://modx.com and the Foundation CSS Framework http://foundation.zurb.com/ we're talking about.