> For the complete documentation index, see [llms.txt](https://docs.cffoundry.technology/cf-coding-practices/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cffoundry.technology/cf-coding-practices/developing-with-the-mura-platform/nested-content-and-interactive-page-assembly.md).

# Nested Content and Interactive Page Assembly

## Using Nested Content To Create Interactive Pages

Part of the power of Mura is the ability to nest content items underneath folders and pages to serve as content for the parent page/folder. This saves going through the effort to organize the content somewhere else, creating a collection/content feed, and then creating an iterator to loop through the feed. The following is an example of a page that detects if there are children/kids (nested content underneath the parent page) for creating tabbed content on the page. Additionally, if one of the tabs is labeled "Downloads", then the page looks for additional next content to populate download links to files loaded under the Downloads tab.

Here is the page content structure that we're working with:

![Nested Content for "eShield" page](/files/-LbFFj_mCNLwoDoZFGak)

As can be seen in the above example, the page "eShield" (a class "Product" class extension of the regular Mura Page content object) has three children/kids pages underneath of it and one of those pages has two children/kids of its own in the form of files using the Mura File content type. In this example, we want to create a page template (.cfm file) that detects if there are children associated with the page and, if so, gets the content and organizes it under tabs labeled with the children page titles. Additionally, it looks to see if there are File content type children under a page titled "Downloads" and, if so, populates the tab with links to those files.

{% code title="product.cfm" %}

```
<cfset pageTitle = $.content('type') neq 'Page' ? $.content('title') : ''>
#$.dspBody(body=$.content('body')
	, pageTitle=pageTitle
	, crumbList=false
	, showMetaImage=false
)#
<!--- If this is a product page, it has children that need to be populated in tabs --->
<cfif $.content().getValue('subtype') eq 'product'> 
<cfset feed = $.getBean('content').getFeed()/>
<cfset content = $.getBean('content').loadBy(contentID=$.content().getValue('ContentID'))/>
<cfset content.get('searchexclude','1')>
<cfset tabs = content.getKidsIterator()>
	<div class="container">
		<div class="row">
			<div class="col-md-4 col-sm-3 hidden-xs">
				<img alt="image" src="#$.createHREFForImage(fileid = $.content().getValue('InformationGraphic'),size='homeheader')#" />
			</div>
			<div class="col-md-8 col-sm-9 col-sm-12">
				<div class="tabbed-content button-tabs">
					<ul class="tabs">
						<cfset index = 0/>
						<cfloop condition="tabs.hasNext()">
							<cfset index = index +1/>
							<cfset tab=tabs.next()/>
							<li id="page#index#" #iif(index eq 1,de('class="active"'),de(''))#>
								<div class="tab-title">
									<span>#tab.getValue('title')#</span>
								</div>
								<div class="tab-content">
									#tab.getValue('body')#
									<!--- get files if this is the downloads tab --->
									<cfset feed = $.getBean('content').getFeed()/>
									<cfset content = $.getBean('content').loadBy(contentID=tab.getValue('ContentID'))/>
									<cfset content.get('searchexclude','1')>
									<cfset files = content.getKidsIterator()>
									<cfif files.hasNext()>
										<ul style="list-style: none;">
										<cfloop condition="files.hasNext()">
											<cfset download=files.next()/>
											<li>
												<a class="link-icon"  href="#$.getURLForFile(fileID=download.getValue('fileID'))#" target="_blank">
													#$.content().getfileIcon(download.getValue('fileID'),"2x")# #download.getValue('title')#
												</a>
											</li>
										</cfloop>
										</ul>
									</cfif>
								</div>
							</li>
						</cfloop>
					</ul>
				</div>
			</div>
		</div>
	</div>
</cfif>
```

{% endcode %}

&#x20;The above sample code uses a custom function that was added to the theme's contentRenderer.cfm file, "getFileIcon()".

{% code title="contentRenderer.cfm" %}

```
/**
* @hint returns an icon (<i>) string for the associated file type
*/
public string function getfileIcon(required string contentType,string size = "2x") {
	var returnString = '<i class="fal fa-file fa-#arguments.size#"></i>';
		
	switch(arguments.contentType){
		case 'pdf':
			returnString = '<i class="fal fa-file-pdf fa-#arguments.size#"></i>';
			break;
		/* Add other subtypes here */
	}
	return returnString;
}
```

{% endcode %}

##


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.cffoundry.technology/cf-coding-practices/developing-with-the-mura-platform/nested-content-and-interactive-page-assembly.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.