Example 1
Code
<div class="panel panel-default">
<div class="panel-heading">Collapsable<label class="pull-right gutter-bottom-none checkbox-inline" style="font-weight: normal"><input data-target=".js-panelnormalswitches8" data-toggle="collapse" type="checkbox" />Hide</label></div>
<div aria-expanded="true" class="panel panel-body js-panelnormalswitches8 collapse in" style="">
<p>Lorem ipsum dolor text...</p>
</div>
</div>
Example 2
Lorem ipsum dolor text...
Lorem ipsum dolor text...
Lorem ipsum dolor text...
Code
<div class="panel panel-default">
<div class="panel-heading" data-target=".js-panelnormalswitches1" data-toggle="collapse"><label class="gutter-bottom-none" style="font-weight: normal">Click?</label></div>
<div aria-expanded="true" class="panel panel-body js-panelnormalswitches1 collapse in" style="">
<p>Lorem ipsum dolor text...</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target=".js-panelnormalswitches2" data-toggle="collapse"><label class="gutter-bottom-none" style="font-weight: normal">Click?</label></div>
<div aria-expanded="true" class="panel panel-body js-panelnormalswitches2 collapse in" style="">
<p>Lorem ipsum dolor text...</p>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" data-target=".js-panelnormalswitches3" data-toggle="collapse"><label class="gutter-bottom-none" style="font-weight: normal">Click?</label></div>
<div aria-expanded="true" class="panel panel-body js-panelnormalswitches3 collapse in" style="">
<p>Lorem ipsum dolor text...</p>
</div>
</div>
Example 3
Trim
The Trim expression allows you to do a number of operations to text:
- Trim - remove any leading or trailing spaces from the text. E.g., " hello " becomes "hello"
- Left Trim - remove any leading spaces from the text. E.g., " hello" becomes "hello"
- Right Trim - remove any trailing spaces from the text. E.g., "hello " becomes "hello"
- Upper Case - transform any text into all uppercase. E.g,. "hello" becomes "HELLO"
- Lower Case - transform any text into all lowercase. E.g., "Hello" and "HELLO" become "hello"
Code
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style type="text/css">.btn {
display: inline-block;
border: none;
color: black;
font-size: 18px;
float: right;
text-align: bottom;
}
.panel-heading {
font-size: 18px;
font-weight: bold;
}
</style>
<div class="panel panel-default">
<div class="panel-heading" data-target=".Switch1" data-toggle="collapse"><strong>Trim<label class="pull-right btn fa fa-expand" type="button"> </label></strong></div>
<div aria-expanded="false" class="panel panel-body Switch1 collapse" style="height: 32px;"><img alt="The Trim step shows a drop-down menu (with "trim" selected) to the left of a data input field." src="https://solutions.teamdynamix.com/TDPortal/Images/Viewer?fileName=e2256759-bdb5-4fce-b528-16ccc7559147.PNG" style="width: 180px; height: 50px;" />
<p>The <strong>Trim </strong>expression allows you to do a number of operations to text:</p>
<ul>
<li><strong>Trim </strong>- remove any leading or trailing spaces from the text. E.g., " hello " becomes "hello"</li>
<li><strong>Left Trim</strong> - remove any leading spaces from the text. E.g., " hello" becomes "hello"</li>
<li><strong>Right Trim</strong> - remove any trailing spaces from the text. E.g., "hello " becomes "hello"</li>
<li><strong>Upper Case</strong> - transform any text into all uppercase. E.g,. "hello" becomes "HELLO"</li>
<li><strong>Lower Case</strong> - transform any text into all lowercase. E.g., "Hello" and "HELLO" become "hello"</li>
</ul>
</div>
</div>