I want to use “accordion-toggle” and “accordian-body collapse” ( bootstrap classes) to add detailed information ro my table as i know i can use bootstrap class and elements inside camunda forms but this one doesn’t work for me and i can’t see any errors in console too, what should i chage to add this show detail function to my table form?
<form role="form">
<script cam-script type="text/form-script">
var persons = $scope.persons = [
{
"id": 1,
"name": "pda",
"age":"454",
"description":"this is simple name"
} ,
{
"id": 1,
"name": "pda2",
"age":"4543",
"description":"this is simple name"
}
];
camForm.on('form-loaded', function() {
camForm.variableManager.createVariable({
name: 'persons',
type: 'Array',
value: persons
});
});
</script>
<div class="container">
<table class="table table-condensed" style="border-collapse:collapse;">
<thead>
<tr><th> </th>
<th>id</th>
<th>name</th>
<th>age</th>
</tr>
</thead>
<tbody ng-repeat="item in persons">
<tr data-toggle="collapse" data-target="#demo3" class="accordion-toggle">
<td><button class="btn btn-default btn-xs"><span class="glyphicon glyphicon-eye-open"></span></button></td>
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
</tr>
<tr>
<td colspan="6" class="hiddenRow"><div id="demo3" class="accordian-body collapse">{{item.description}}</div></td>
</tr>
</tbody>
</table>
</div>
</form>