mkay
1/17/2014 - 7:31 PM

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

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

[[*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>
`]]
<dd class="active"><a href="[[~[[+id]]]]#[[+id]]"><i class="[[+link_attributes]]"></i> [[+pagetitle]]</a></dd>
<dd><a href="[[~[[+id]]]]#[[+id]]"><i class="[[+link_attributes]]"></i> [[+pagetitle]]</a></dd>
<div class="content active" id="[[+id]]">
    <h3 class="tab_heading">[[+longtitle]]</h3>
    <p>[[+content]]</p>
</div>
<div class="content" id="[[+id]]">
    <h3 class="tab_heading">[[+longtitle]]</h3>
    <p>[[+content]]</p>
</div>

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