loading Loading...
add chat to your website

Toggle Content

Toggle allows you to expand/collapse a section. The reader can click on the heading to make the additional information show/expand. The hidden/collapsed content can include images, videos, tables, and anything else you want. This makes it easier to scan a page and then click to expand relevant details.
 

Click to see an example

This is the hidden content. Add your own text here. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

 

Adding Toggle to a Page

  1. Edit the page you want to add the toggle to. 
  2. In the editor, click where you want to insert the toggle.
  3. From the toolbar, select Insert > Toggle Content.  
  4. An overlay will appear.
     
  5. Enter an expand label such as "Click to show more." You can always change it later.
  6. Enter or paste in the content that will be hidden.
  7. Click OK to insert into page.
  8. To preview, save the page, and then select View page from the toolbar. Click on the link to expand the text.

 

When editing, the hidden/collapsed section will always be expanded. To preview it, save the page, and then select View page from the toolbar.

Technical Reference

This section is for those who are technical and want to know how it 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.