Bootstrap Tabs in Neos

NodeTypes.yaml

'TYPO3.NeosDemoTypo3Org:Tabs':
  superTypes: ['TYPO3.Neos:Content']
  childNodes:
    tabItems:
      type: 'TYPO3.Neos:ContentCollection'
  ui:
    label: 'Tabs'
    group: 'plugins'
    icon: 'icon-picture'
    inlineEditable: TRUE
    inspector:
      groups:
        'options':
          label: 'Tab Options'
  properties:
    fade:
      type: boolean
      ui:
        label: 'Fade'
        inspector:
          group: 'options'

'TYPO3.NeosDemoTypo3Org:Tab':
  superTypes: ['TYPO3.Neos:Content']
  childNodes:
    content:
      type: 'TYPO3.Neos:ContentCollection'
  ui:
    label: 'Tab Element'
    group: 'plugins'
    icon: 'icon-picture'
    inlineEditable: TRUE
    inspector:
     groups:
       'options':
         label: 'Tab Options'
  properties:
    tabTitle:
      type: string
      ui:
        label: 'Tab Title'
        inspector:
          group: 'options'

Tab.html

<div class="tab-pane" id="{node.identifier}">
{content -> f:format.raw()}
</div>

Tabs.html

<ul class="nav nav-tabs">
	<f:for each="{tabItemNodes}" as="tabItemNode" iteration="tabIteration">
		<li{f:if(condition: tabIteration.isFirst, then: ' class="active"')}><a href="#{tabItemNode.identifier}" data-toggle="tab">{tabItemNode.properties.tabTitle}</a></li>
	</f:for>
</ul>

<!-- Tab panes -->

{tabItems -> f:format.raw()}

tabs.ts

prototype(TYPO3.NeosDemoTypo3Org:Tabs) {
	tabItems = TYPO3.Neos:ContentCollection {
		nodePath = 'tabItems'

		attributes.class = 'tab-content neos-contentcollection'
	}

	tabItemNodes = ${q(node).children('tabItems').children('[instanceof TYPO3.NeosDemoTypo3Org:Tab]').get()}
}

prototype(TYPO3.NeosDemoTypo3Org:Tab) {
	content = TYPO3.Neos:ContentCollection {
		nodePath = 'content'
	}
}