Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
"generateTabs" output filter for ContentBlocks. See for instructions.
<li class="tab-title [[+idx:is=`1`:then=`active`:else=``]]" role="presentational">
<a href="#[[+id]]" role="tab" tabindex="0" aria-selected="false" controls="[[+id]]">[[+title]]</a>
<div class="tab-accordion-cmp">
<ul class="tabs show-for-large-up" data-tab>
<dl class="tabs-content accordion" data-accordion>
<dd class="accordion-navigation">
<a href="#tab-[[+unique_idx]]-[[+idx]]"
class="accordion-tab hide-for-large-up">
<section id="tab-[[+unique_idx]]-[[+idx]]"
data-tabcontent data-title="[[+title]]"
role="tabpanel" aria-hidden="false"
class="content [[+idx:is=`1`:then=`active`:else=``]]">
<div class="content-box section-box">
$doc = new DOMDocument();
$doc->loadHTML('<meta http-equiv="content-type" content="text/html; charset=utf-8">'.$input);
$divs = $doc->getElementsByTagName('section');
$tabs = array();
$idx = 1;
foreach($divs as $div) {
if ($div->hasAttribute('data-tabcontent')) {
$tabs[$div->getAttribute('id')] = $div->getAttribute('data-title');
$tabheaders = '';
$idx = 1;
foreach($tabs as $id => $title) {
$tabheaders .= $modx->getChunk('tabNavigationItem', array(
'idx' => $idx,
'id' => $id,
'title' => $title
return $tabheaders;
Copy link

Copy link

The slides can now be found at

The link is not working.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment