loading Loading...
add chat to your website

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

 

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