How to Add Toggle Content

The toggle allows you to expand or collapse a section of a help article. A toggle has a heading that a user can click to expand a section that displays the hidden content. The hidden or collapsed content can include images, videos, tables, and text.

This makes it easier for readers to scan a page efficiently by presenting them with a cleaner interface. The content in a toggle is not just limited to a single article or site. It can be used across multiple sites and is especially useful if a certain piece of information is repeated in multiple articles. For eg. Contact info. of a company.

Note: Use unique toggle content on a page. You can not use the same toggle multiple times on the same page.

Benefits of Toggle Content:

Maintains uniformity of information across multiple sites.
Content created in a toggle is reusable.
Opens in the same window and doesn't redirect the reader to a separate page.

The following will be discussed further:

Creating a Toggle
Toggle Content Customization Window
Adding Toggle to a Page
Technical Reference

Creating a Toggle

Step 1: Click on + Add New and select Toggle Content.

Step 2: Add content in the toggle content customization window according to your requirements and then click on Save.

Toggle Content Customization Window

Given below is the Toggle Content Customization Window.

Title: This is the title that will be visible to the reader when the toggle is inserted in an article.
Description: This description is meant as a reference for the user to understand the content of a toggle.
Available for all sites: Ticking this checkbox makes the toggle available for all sites. If the checkbox is not selected, the toggle will be available only for the site it has been created in.
Toggle Editor: The toggle editor works similarly to the knowledgebase editor and contains the content that will be displayed to the reader.

Adding Toggle to a Page

Step 1: Click on the Insert drop-down and select Toggle Content.

Step 2: In the menu window that opens, select the toggle you want to insert.

Technical Reference

This section is for those who are trying to understand how the toggle content feature works.

When you insert the toggle, it will add the following code to the page:

<a class="toggle-content" href="#7670">Expand label</a></p> <div id="7670">This is the hidden content</div>

This is the hidden content
ID=7670 is just a random number the system uses to identify which panel to expand and collapse. You can change this to whatever you want but the ID must be unique.
<div id="7670">...</div> All the content you want hidden/collapsed must go inside of this DIV.
If you need to debug the source code of the page, click the in the toolbar. This is helpful if you need to clean up or adjust the HTML.
Unfortunately, there is no way to use icons +/- or have the text change at this time.

Related Articles:

Content Snippet
Merge Tags
Code Highlighter