Using accordions to create expandable and collapsible sections in the article editor

<body>
<p id="docs-hc-snippet" style="display: none;">Accordions are collapsible sections that you can add to an article to organize content into expandable blocks. Accordions help users scan long content more quickly by showing section titles first, then allowing them to expand only the information they need.</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>Knowledge Professional or Enterprise</td>
</tr>
</tbody>
</table>
</div>

</div>
<div id="docs-ai-summary">
<p id="docs-ai-summary-toggle">Summary: <span id="up-triangle">◀</span><span id="down-triangle">▼</span></p>
<p id="docs-ai-summary-content">Use accordions to turn long articles into expandable sections that help users scan content, reduce scrolling, and focus on the details they need. You can add, reorder, move, or delete accordion sections in the article editor without code, making them a good fit for FAQs, troubleshooting, and optional guidance.</p>
</div>

<div class="body">

<p class="p">Accordions are collapsible sections that you can add to an article to organize content
into expandable blocks. Accordions help users scan long content more quickly by showing
section titles first, then allowing them to expand only the information they need.</p>
<p class="p">Accordions are especially useful for content that includes repeated patterns, such as
questions and answers, troubleshooting topics, or optional guidance. Instead of showing
every section in full, accordions help reduce scrolling and make articles easier to
scan.</p>
<p class="p">You can use the accordion component in the article editor to create and manage accordions
without having to add or edit code.</p>
<div class="p">
<img class="image img-screenshot" id="topic_a5d_v3q_zjc__image_sh3_35d_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-example-image.png" width="700"><div class="note" id="topic_a5d_v3q_zjc__note_xsl_qqg_bkc">
<span class="notetitle">Note:</span> To customize the accordions component in your theme, see
"Customize accordions in the article editor" in the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626" target="_blank">Help center templating cookbook</a>.</div>
</div>
<div class="p">This article contains the following sections:<ul class="ul" id="topic_a5d_v3q_zjc__ul_ww5_5bd_1kc">
<li class="li"><a class="xref" href="#topic_vbt_wwc_1kc">Creating accordions in the article editor</a></li>
<li class="li"><a class="xref" href="#topic_cks_mnd_1kc">Working with accordion components in the article editor</a></li>
</ul>
</div>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_vbt_wwc_1kc">
<h2 class="title topictitle2" id="ariaid-title2">Creating accordions in the article editor</h2>
<div class="body">
<p class="p">You can create accordions directly from the article editor toolbar without adding
custom code. When creating accordions, carefully consider the titles you want to use
for each section. Accordions work best when each section title is short, specific,
and descriptive. Users should be able to understand what each section contains
before expanding it.</p>
<div class="p">
<strong class="ph b">To create accordions in the article editor</strong><ol class="ol" id="topic_vbt_wwc_1kc__ol_wn3_hyc_1kc">
<li class="li">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_dzz_4wn_s2c" target="_blank">help center</a> or <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, create a new
article or edit an existing article.</li>
<li class="li">Place the cursor where you want the accordion to appear.</li>
<li class="li">Click the <strong class="ph b">Article components</strong> button (<img class="image" id="topic_vbt_wwc_1kc__image_fft_k3h_kjc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/Article-components-button.png" width="35">) on the article editor toolbar and
select <strong class="ph b">Accordion</strong>.<p class="p">The accordion component appears in edit
mode.</p>
<p class="p"><img class="image" id="topic_vbt_wwc_1kc__image_wtg_h1d_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-new.png" width="600"></p>
</li>
<li class="li">Enter the following information:<ul class="ul" id="topic_vbt_wwc_1kc__ul_u3q_m1d_1kc">
<li class="li">
<strong class="ph b">Section title</strong>: Text that appears in the article editor
alongside the accordion expand/collapse arrow. Make this title clear
and concise to help users determine whether they want to expand the
related accordion.</li>
<li class="li">
<strong class="ph b">Content</strong>: Content that you want to appear when users expand
the accordion. You can use the article editor tools to format text
as you would in any other area of your article.</li>
</ul>
</li>
<li class="li">Click the <strong class="ph b">Add section</strong> icon (+) in the accordion toolbar to add a new
section to the accordion.<p class="p"><img class="image" id="topic_vbt_wwc_1kc__image_qhf_tmd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-addseciton.png" width="150"></p>
</li>
<li class="li">Continue working with sections in the accordion until you're satisfied with
the layout and content. <p class="p">If you want to:</p>
<ul class="ul" id="topic_vbt_wwc_1kc__ul_tyb_gnd_1kc">
<li class="li">
<strong class="ph b">Reorder sections</strong> within the accordion, click the <strong class="ph b">Move
up</strong> (<img class="image" id="topic_vbt_wwc_1kc__image_yhw_zld_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-moveup.png" width="20">) or <strong class="ph b">Move down</strong> (<img class="image" id="topic_vbt_wwc_1kc__image_uk3_xld_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-movedown.png" width="15">) icons in the accordion
toolbar for the section you want to move.</li>
<li class="li">
<strong class="ph b">Remove a section</strong> within the accordion, click the Remove icon
(<img class="image" id="topic_vbt_wwc_1kc__image_mcc_znd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-remove-section.png" width="20">) in the accordion toolbar
for the section you want to move.</li>
</ul>
</li>
<li class="li">Click <strong class="ph b">Save</strong>.</li>
</ol>
</div>
</div>
</div>
<div aria-labelledby="ariaid-title3" class="topic nested1" id="topic_cks_mnd_1kc">
<h2 class="title topictitle2" id="ariaid-title3">Working with accordion components in the article editor</h2>
<div class="body">
<p class="p">You can create as many accordion components as necessary in your help center article.
Once you create an accordion component, you can move or delete the accordion, or add
a line return before or after the accordion in the article editor. </p>
<p class="p"><strong class="ph b">To work with accordion components in the article editor</strong></p>
<ol class="ol" id="topic_cks_mnd_1kc__ol_ywx_5nd_1kc">
<li class="li">In <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_dzz_4wn_s2c" target="_blank">help center</a> or <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/9041943683354#topic_b5q_nwn_s2c" target="_blank">Knowledge admin</a>, edit an existing
article that contains an accordion component.</li>
<li class="li">Hover over the accordion component in the article editor to expose the accordion
controls.<p class="p"><img class="image" id="topic_cks_mnd_1kc__image_u5y_z4d_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-controls.png" width="600"></p>
</li>
<li class="li">If you want to:<ul class="ul" id="topic_cks_mnd_1kc__ul_jhb_brd_1kc">
<li class="li">
<strong class="ph b">Add a space</strong> between the accordion component and the previous line
or following line, click the return icon (<img class="image" id="topic_cks_mnd_1kc__image_yvj_zqd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-return.png" width="18">) above or below the
component.</li>
<li class="li">
<strong class="ph b">Move the accordion</strong> component elsewhere in the article, click and
drag the handlebar icon (<img class="image" id="topic_cks_mnd_1kc__image_igm_dsd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-handlebar.png" width="16">) to a new location.</li>
<li class="li">
<strong class="ph b">Delete the accordion component</strong>, click the handlebar icon (<img class="image" id="topic_cks_mnd_1kc__image_whb_hsd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-handlebar.png" width="16">) to select the component, then
press <strong class="ph b">Delete</strong> on your keyboard.</li>
</ul>
</li>
<li class="li">Click <strong class="ph b">Save</strong>.</li>
</ol>
</div>
</div>
<script id="docs-schema-markup" type="application/ld+json">{
"@context": "https://schema.org",
"@type": "TechArticle",
"@id": "https://support.zendesk.com/hc/en-us/articles/11042696237850",
"url": "https://support.zendesk.com/hc/en-us/articles/11042696237850",
"headline": "Using accordions to create expandable and collapsible sections in the article editor",
"description": "You can use accordion components in the article editor to create expandable, collapsible sections, add section titles and content, and move, reorder, or delete them.",
"articleSection": "Product help",
"datePublished": "2026-07-22T19:58:39+00:00",
"dateModified": "2026-07-30T12:10:49.808248+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/11042696237850"
},
"author": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"publisher": {
"@type": "Organization",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
},
"isPartOf": {
"@type": "WebSite",
"name": "Zendesk Help",
"@id": "https://support.zendesk.com/hc/"
},
"about": {
"@type": "SoftwareApplication",
"name": "Zendesk",
"@id": "https://www.zendesk.com"
}
}</script><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>