Skip to content

Instantly share code, notes, and snippets.

@christianseel
Last active November 8, 2023 11:47
Show Gist options
  • Save christianseel/80a9249920518954fda0 to your computer and use it in GitHub Desktop.
Save christianseel/80a9249920518954fda0 to your computer and use it in GitHub Desktop.
"generateTabs" output filter for ContentBlocks. See http://slides.com/christianseel/contentblocks/ 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>
</li>
<div class="tab-accordion-cmp">
<ul class="tabs show-for-large-up" data-tab>
[[+rows:generateTabs]]
</ul>
<dl class="tabs-content accordion" data-accordion>
<dd class="accordion-navigation">
[[+rows]]
</dd>
</dl>
</div>
<a href="#tab-[[+unique_idx]]-[[+idx]]"
class="accordion-tab hide-for-large-up">
[[+title]]
</a>
<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">
[[+content]]
</div>
</section>
<?php
$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
));
$idx++;
}
return $tabheaders;
@enigmatic-user
Copy link

@travisbotello
Copy link

The slides can now be found at http://sedadigital.slides.com/sedadigital/contentblocks#/4.

The link is not working.

@RMPnet-UK
Copy link

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