Using tabs to group content in the article editor

<body>
<p id="docs-hc-snippet" style="display: none;">You can use the tabs component in the article editor to organize related content into separate panels. Help center users can select a tab to view the version of the content that applies to them. They can switch to another tab easily to read alternate content without shifting focus in the article. This helps reduce scrolling and makes similar instructions easier to compare.</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">Tabs let you group related article content into selectable panels, so your readers can switch between versions of the same instructions without losing their place. Use them for platform-specific, role-specific, or use-case content to cut scrolling and make comparisons easier. You can add, reorder, and remove tabs in the article editor without custom code.</p>
</div>

<div class="body">

<p class="p">You can use the tabs component in the article editor to organize related content into
separate panels. Help center users can select a tab to view the version of the content
that applies to them. They can switch to another tab easily to read alternate content
without shifting focus in the article. This helps reduce scrolling and makes similar
instructions easier to compare.</p>
<p class="p">Use tabs when you need to present parallel content, such as instructions for different
operating systems, products, roles, or use cases. You can create tabs directly from the
article editor toolbar without using custom code.</p>
<div class="p">
<img class="image img-screenshot" id="topic_wfp_t3q_zjc__image_ecy_cb2_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-tab-about-illus.png" width="600"><div class="note" id="topic_wfp_t3q_zjc__note_xsl_qqg_bkc">
<span class="notetitle">Note:</span> To customize the tabs component in your theme, see <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626-Help-center-templating-cookbook#topic_ept_tmg_bkc" target="_blank">Customize tabs in the article editor</a> and
<a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626-Help-center-templating-cookbook#topic_y23_hwm_fkc" target="_blank">Customize tabs behavior with JavaScript</a> in
the <a class="xref" href="https://support.zendesk.com/hc/en-us/articles/4408832681626" target="_blank">Help center templating
cookbook</a>.</div>
</div>
<p class="p">This article contains the following topics:</p>
<ul class="ul" id="topic_wfp_t3q_zjc__ul_n2j_htc_1kc">
<li class="li"><a class="xref" href="#topic_c2d_sj2_1kc">Creating tabs in the article editor</a></li>
<li class="li"><a class="xref" href="#topic_kxw_tj2_1kc">Working with tabs in the article editor</a></li>
</ul>
</div>
<div aria-labelledby="ariaid-title2" class="topic nested1" id="topic_c2d_sj2_1kc">
<h2 class="title topictitle2" id="ariaid-title2">Creating tabs in the article editor</h2>
<div class="body">
<p class="p">You can create tabs when you want to display related content in separate selectable
panels within an article. Before you begin, decide what content belongs in each tab.
Tabs are most effective when each tab represents a clear variation of the same
topic, such as a platform-specific or role-specific version of a procedure.</p>
<div class="p">
<strong class="ph b">To create tabs in the article editor</strong><ol class="ol" id="topic_c2d_sj2_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 tabs to appear.</li>
<li class="li">Click the <strong class="ph b">Article components</strong> button (<img class="image" id="topic_c2d_sj2_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">Tabs</strong>.<p class="p">The tabs component appears in edit mode. </p>
<p class="p img-screenshot"><img class="image" id="topic_c2d_sj2_1kc__image_wtg_h1d_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-tabs-new.png" width="600"></p>
</li>
<li class="li">Enter the following information:<ul class="ul" id="topic_c2d_sj2_1kc__ul_u3q_m1d_1kc">
<li class="li">
<strong class="ph b">Tab title</strong>: Text that appears in the article editor as the tab
label. Make this title short and concise to clearly indicate the tab
contents while not consuming too much space in the article itself. </li>
<li class="li">
<strong class="ph b">Content</strong>: Content that you want to appear when users open the
tab. 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 tab</strong> icon (+) in the tab toolbar to add a new section to
the tab.<p class="p"><img class="image" id="topic_c2d_sj2_1kc__image_qhf_tmd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-add-tab.png" width="150"></p>
</li>
<li class="li">Identify the tab that you want to be open by default in the help center, and
expand that tab in the editor. <p class="p">For example, if you have three tabs and
want the second tab to be expanded when the user opens the article,
expand that tab in the editor before saving and publishing. The expanded
tab in the editor defaults to open when users open the article.</p>
</li>
<li class="li">Continue working with tabs until you're satisfied with the layout and
content. <p class="p">If you want to:</p>
<ul class="ul" id="topic_c2d_sj2_1kc__ul_tyb_gnd_1kc">
<li class="li">
<strong class="ph b">Reorder tabs</strong>, click the <strong class="ph b">Move up</strong> (<img class="image" id="topic_c2d_sj2_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_c2d_sj2_1kc__image_uk3_xld_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-movedown.png" width="15">) icons in the tabs toolbar
for the tab you want to move.</li>
<li class="li">
<strong class="ph b">Remove a tab</strong>, click the Remove icon (<img class="image" id="topic_c2d_sj2_1kc__image_mcc_znd_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-accordion-remove-section.png" width="20">) in the tabs toolbar for the
tab 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_kxw_tj2_1kc">
<h2 class="title topictitle2" id="ariaid-title3">Working with tabs in the article editor</h2>
<div class="body">
<p class="p">You can create as many tab components as necessary in your help center article. Once
you create a tab component, you can move or delete it, or add a line return before
the tab in the article editor. </p>
<p class="p"><strong class="ph b">To work with tab components in the article editor</strong></p>
<ol class="ol" id="topic_kxw_tj2_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 a tabs component.</li>
<li class="li">Hover over the tabs component in the article editor to expose the
controls.<p class="p"><img class="image" id="topic_kxw_tj2_1kc__image_u5y_z4d_1kc" src="https://zen-marketing-documentation.s3.amazonaws.com/docs/en/knw-tabs-controls.png" width="600"></p>
</li>
<li class="li">If you want to:<ul class="ul" id="topic_kxw_tj2_1kc__ul_jhb_brd_1kc">
<li class="li">
<strong class="ph b">Add a space</strong> between the tabs component and the previous or
following line, click the return icon (<img class="image" id="topic_kxw_tj2_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 tab</strong> component elsewhere in the article, click and drag
the handlebar icon (<img class="image" id="topic_kxw_tj2_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 tab component</strong>, click the handlebar icon (<img class="image" id="topic_kxw_tj2_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/11042740425754",
"url": "https://support.zendesk.com/hc/en-us/articles/11042740425754",
"headline": "Using tabs to group content in the article editor",
"description": "You can use tabs in the article editor to group related content into selectable panels, and this article shows you how to create, reorder, remove, move, or delete tab components.",
"articleSection": "Working with articles in the knowledge base",
"datePublished": "2026-07-22T19:57:40+00:00",
"dateModified": "2026-08-13T15:31:11.141496+00:00",
"inLanguage": "en",
"mainEntityOfPage": {
"@type": "WebPage",
"@id": "https://support.zendesk.com/hc/en-us/articles/11042740425754"
},
"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",
"softwareAddOn": {
"@type": "SoftwareApplication",
"name": "Knowledge",
"@id": "https://support.zendesk.com/hc/en-us/sections/4405298860954"
}
}
}</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>