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