Create collapsible content in Knowledge Base

Overview

Advanced Tip! This tutorial require viewing Source Code and performing HTML Coding

Within KnowledgeBase article you may want to create content that are hidden by default but only revealed if user click on it. see example below

 

Click here for T&C

This text will be hidden by default This text will be hidden by default This text will be hidden by default This text will be hidden by default This text will be hidden by default This text will be hidden by default This text will be hidden by default This text will be hidden by default This text will be hidden by default

 

How to

Go to the Source and paste the following script

<a class="btn btn-default" href="#tnc" data-toggle="collapse">Click here for T&amp;C</a>
<div class="collapse" id="tnc">This text will be hidden by default</div>

Please Note

  1. When toggling between Source and Preview Mode this editor will strip out data-toggle="collapse", as it is designed to strip out non standard HTML code,  the workaround is to save your article in Source mode
  2. If you don't want button styling the following text can be removed class="btn btn-default" 
Created on 31 March 2016 by Michael Christian. Last modified on 6 August 2018

Was this helpful?  

1 Like
Share

[Discuss]

photo
{{ comment.user.is_me ? cc.translations.my_comment : comment.user.name }} {{ comment.user.is_me ? cc.translations.my_comment : comment.user.name }} {{comment.user.name}} [wrote]...
[Reply] [Like] {{comment.like_count}} [person] [people] [liked this] [Edit] [Delete] {{ comment.timestamp.date_str }}

[Loading...]