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 which 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.

 

 

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: Edit the toggle according to your requirements and click Save when done.

 

 

 

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 check box 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 similar 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