Mura CMS: How to create Bootstrap tabs of children content as either links, or with panels.

mura-tabs-as-links.cfm

<!--- Mura CMS Bootstrap Tabs as Links --->
<cfoutput>
  <cfset it = $.content().getKidsIterator() />

  <!--- Only output if there's any kids --->
  <cfif it.hasNext()>

      <!--- Nav Tabs --->
      <ul class="nav nav-tabs" role="tablist">
        <cfloop condition="it.hasNext()">
          <cfset item = it.next() />
          <cfset tabClass = it.currentIndex() == 1 ? 'active' : '' />
          <li role="presentation" class="#tabClass#">
            <a href="#item.getURL()#" role="tab">
              #esapiEncode('html', item.getValue('menuTitle'))#
            </a>
          </li>
        </cfloop>
      </ul>

  </cfif>
</cfoutput>

mura-tabs-with-panels.cfm

<!--- Mura CMS Bootstrap Tabs With Panels --->
<cfoutput>
	<cfset it = $.content().getKidsIterator() />

	<!--- Only output if there's any kids --->
	<cfif it.hasNext()>

		<div role="tabpanel">

			<!--- Nav Tabs --->
			<ul class="nav nav-tabs" role="tablist">
				<cfloop condition="it.hasNext()">
					<cfset item = it.next() />
					<cfset tabClass = it.currentIndex() == 1 ? 'active' : '' />
					<li role="presentation" class="#tabClass#">
						<a href="##tab#it.currentIndex()#" role="tab" data-toggle="tab">
							#esapiEncode('html', item.getValue('menuTitle'))#
						</a>
					</li>
				</cfloop>
			</ul>

			<!--- We need to reset the iterator, so we can loop over it again! --->
			<cfset it.reset() />

			<!--- Tab Panes --->
			<div class="tab-content">
				<cfloop condition="it.hasNext()">
					<cfset item = it.next() />
					<cfset tabClass = it.currentIndex() == 1 ? 'in active' : '' />
					<div id="tab#it.currentIndex()#" role="tabpanel" class="tab-pane fade #tabClass#">
						<!--- This is the tab pane area where you can output anything you want --->
						<h3>#esapiEncode('html', item.getValue('title'))#</h3>
						<ul>
							<li>Created: #item.getValue('created')#</li>
							<li>Last Update: #item.getValue('lastupdate')#</li>
							<li>Last Update By: #item.getValue('lastupdateby')#</li>
						</ul>
					</div>
				</cfloop>
			</div>

		</div>
		<!--- /tabpanel --->

	</cfif>
</cfoutput>