Expand Collapse demo

Test chapter - Click the expand/collapse button on the right

This content will be opened and hidden with the expand/collapse button.

Put whatever you like here.


Use it to expand and collapse segments inside your forms.

<div class="panel panel-default pull-left">
    <div class="panel-heading">
        <!-- Collapse/Expand button start -->
        <div data-toggle="buttons" class="pull-right">
            <label class="btn btn-sm btn-default active">
                <input type="checkbox" name="Expand" checked="checked" data-func="collapse" data-container=".panel" data-body=".panel-body" />
                <span class="glyphicon glyphicon-plus"></span>
            </label>
        </div>        
        <!-- Collapse/Expand button end -->
        <h2 style="margin:0">
            Test chapter
            <small> - Click the expand/collapse button on the right</small>
        </h2>
    </div>
    <div class="panel-body">
        This content will be opened and hidden with the expand/collapse button.
        <p>Put whatever you like here.</p>
        <label>Such as input fields:</label>
        <input name="SomeField" />
        <br />
        <p>Use it to expand and collapse segments inside your forms.</p>
    </div>
</div>
No JS code used for this example

Output templates

Templates used for document and web page generation:

Friendly Name File Name Template