Displaying subsections in your help center

<body>
<p id="docs-hc-snippet" style="display: none;">You canadd subsections(sections in sections) to your help center knowledge base to create more levels of hierarchy, up to six levels deep.</p>
<div class="article-banners">
<div id="docs-wmp-link">
<a href="https://support.zendesk.com/hc/en-us/articles/5411234991258-plan" rel="noopener" target="_blank">What's my plan?</a>
</div>

<div class="article-banner" id="suite_all">
<table>
<tbody>
<tr>
<td>
<strong>All Suites</strong>
</td>
<td>Team, Growth, Professional, Enterprise, or Enterprise Plus</td>
</tr>
</tbody>
</table>
</div>

<div class="article-banner" id="support_with_guide_all">
<table>
<tbody>
<tr>
<td>
<strong>Support with</strong>
</td>
<td>Guide Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Verified AI summary <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">Add subsections to your help center knowledge base for better hierarchy, up to six levels deep. Customize the Copenhagen theme to display subsections on category pages or as blocks. Modify the template code to suit your needs, but note that support for custom code isn't provided. This feature helps organize content, making it easier for users to navigate and find information.</p>
</div>

<div class="body">

<p class="p">You can <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408834687130" target="_blank">add subsections</a> (sections in sections) to your help
center knowledge base to create more levels of hierarchy, up to six levels deep.</p>
<div class="p">By default, the standard Copenhagen theme's section page template displays a list of each
section's subsections. You can <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408839332250-" target="_blank">modify the theme's code</a> to display subsections using other page
templates or to change the look of the subsections lists.<div class="note" id="topic_hpv_4gs_jhb__note_wfd_rfb_2fc">
<span class="notetitle">Note:</span> This
article is provided for instructional purposes only. Zendesk does not support or guarantee
the code. Zendesk also can't provide support for third-party technologies such as
JavaScript, jQuery, or CSS. Post any issues you have in the comments section or try
searching for a solution online or from your favorite AI chat bot.</div>
</div>
<p class="p">You can only show the direct subsections of a section. You cannot show multiple levels of
subsections.</p>
<div class="p">This article contains the following examples:<ul class="ul" id="topic_hpv_4gs_jhb__ul_vcz_sls_jhb">
<li class="li"><a class="xref" href="#topic_ldx_5gs_jhb">Showing subsections on category pages</a></li>
<li class="li"><a class="xref" href="#topic_j3b_vgs_jhb">Showing sections and subsections as blocks</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_ldx_5gs_jhb">
<h2 class="title topictitle2" id="ariaid-title2"><strong class="ph b" id="docs-internal-guid-ae1056c9-7fff-3433-fff3-145be3d97a9a">Showing subsections on category pages</strong></h2>
<div class="body">
<p class="p">You can update the template to display subsections below each section's articles.</p>
<p class="p"><img class="image img-screenshot" id="topic_ldx_5gs_jhb__image_blc_dns_jhb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/example_subsections_on_category_page.png" width="600"></p>
<p class="p"><strong class="ph b">To customize the category page template</strong></p>
<p class="p">In the category page template, insert the following block after <code class="ph codeph">&lt;section
class="section"&gt;</code>:</p>
<div class="p">
<pre class="pre codeblock"><code>{{#if sections}}
&lt;ul class="section-list"&gt;
{{#each sections}}
&lt;li class="section-list-item"&gt;
&lt;a href="{{url}}"&gt;
&lt;span&gt;{{name}}&lt;/span&gt;
&lt;svg
xmlns="http://www.w3.org/2000/svg"
width="16"
height="16"
focusable="false"
viewBox="0 0 16 16"
aria-hidden="true"
&gt;
&lt;path
fill="none"
stroke="currentColor"
stroke-linecap="round"
stroke-width="2"
d="M5 14.5l6.1-6.1c.2-.2.2-.5 0-.7L5 1.5"
&gt;&lt;/path&gt;
&lt;/svg&gt;
&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
{{/if}}</code></pre>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_j3b_vgs_jhb">
<h2 class="title topictitle2" id="ariaid-title3"><strong class="ph b" id="docs-internal-guid-50ebf5b1-7fff-ba70-4a5d-cb2c469b4192">Showing sections and subsections as blocks</strong></h2>
<div class="body">
<p class="p">You can customize the Copenhagen theme's category page template to display sections as
blocks.</p>
<p class="p"><img class="image img-screenshot" id="topic_j3b_vgs_jhb__image_d25_jsm_jvb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/example_section_blocks_io_category_page.png" width="600"></p>
<p class="p">Similarly, you can customize the sections page template to display subsections as
blocks.</p>
<p class="p"><img class="image img-screenshot" id="topic_j3b_vgs_jhb__image_jrb_ksm_jvb" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/example_subsections_on_sections_page.png" width="600"></p>
<p class="p"><strong class="ph b">To customize the category page template</strong></p>
<div class="p">In the category page template, replace the <code class="ph codeph">&lt;div id="main-content"
class="section-tree"&gt;</code> tag and its contents with the following
snippet:<pre class="pre codeblock"><code>&lt;section class="categories blocks"&gt;
&lt;ul class="blocks-list"&gt;
{{#each sections}}
&lt;li class="blocks-item"&gt;
&lt;a href='{{url}}' class="blocks-item-link"&gt;
&lt;h4 class="blocks-item-title"&gt;{{name}}&lt;/h4&gt;
&lt;p class="blocks-item-description"&gt;{{excerpt description}}&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
&lt;/section&gt;</code></pre>
</div>
<p class="p"><strong class="ph b">To customize the sections template</strong></p>
<div class="p">In the sections page template, replace the <code class="ph codeph">{{#if section.sections}}&gt;</code>
block and its contents with the following
snippet:<pre class="pre codeblock"><code>{{#if section.sections}}
&lt;section class="sections blocks"&gt;
&lt;ul class="blocks-list"&gt;
{{#each section.sections}}
&lt;li class="blocks-item"&gt;
&lt;a href="{{url}}" class="blocks-item-link"&gt;
&lt;h4 class="blocks-item-title"&gt;{{name}}&lt;/h4&gt;
&lt;p class="blocks-item-description"&gt;{{excerpt description}}&lt;/p&gt;
&lt;/a&gt;
&lt;/li&gt;
{{/each}}
&lt;/ul&gt;
&lt;/section&gt;
{{/if}}</code></pre>
</div>
</div>
</div>
<script id="ai-summary-script">
//<![CDATA[
const ai_summary_style = document.createElement('style');
ai_summary_style.innerHTML = `#styled-article-body{padding:0 0 0}#article-body #docs-ai-summary{background-color:#f3f3f3;border:1px solid #d3d3d3;padding:10px 10px 6px;margin-bottom:16px}#article-body #docs-ai-summary #docs-ai-summary-toggle{font-size:.9em;font-weight:700;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center}#article-body #docs-ai-summary #docs-ai-summary-toggle #up-triangle{margin-left:auto;padding-right:10px;display:none}#article-body #docs-ai-summary #docs-ai-summary-toggle #down-triangle{margin-left:auto;padding-right:10px}#article-body #docs-ai-summary #docs-ai-summary-content{font-size:.9em;padding-left:25px;padding-right:25px;margin-bottom:12px}`;
document.head.appendChild(ai_summary_style);

const toggleAISummary = () => {
const summary = document.getElementById("docs-ai-summary-content");
const upTriangle = document.getElementById("up-triangle");
const downTriangle = document.getElementById("down-triangle");
if (summary.style.display === "none") {
summary.style.display = "block";
upTriangle.style.display = "none";
downTriangle.style.display = "inline";
} else {
summary.style.display = "none";
upTriangle.style.display = "inline";
downTriangle.style.display = "none";
}
};

document.getElementById("docs-ai-summary-toggle").addEventListener("click", toggleAISummary);
//]]>
</script>
</body>