Create collapsible content in Knowledge Base

By Michael Christian on 31 March 2016
1 Like

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

Claromentis 7 uses Bootstrap 2 Framework (Please Note Claromentis 8 will be using Bootstrap3) which provide functionality called data-toggle. This does involve going 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" 

[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...]