Feeling guilty for all my needless whining in this forum the past week or so?
I thought I?d pass on some simple modifications to the bootstrap form template I am using that will allow you to display breakout groups as tiny modules that expand and collapse when clicked.
This is great for when you have a lot of repeat groups ? especially if the form is large.
Just add this code to the top of the default_repeatgroup.php file. ( In the case statement put the form ids using this template as the value to check against and set $groupLabel to the label to be shown for that form id. )...
Now insert this html code just below the first div tag (<div class="fabrikSubGroup">) in the foreach loop and before the php open tag.
Just after the if/endif change the div tag to include a style attribute to hide the group
Now add this javascript to the form_#.js file for the template (inside the document ready function) to work the magic ...
That's about it. A sample of what the form will now look like is attached.
My original intent was to put the group name as the label (in the foreach loop) - but what was happening was that when a new group was added via ajax - it always used the last group name. (If anyone can tell me how to get around that, I would appreciate it.)
I thought I?d pass on some simple modifications to the bootstrap form template I am using that will allow you to display breakout groups as tiny modules that expand and collapse when clicked.
This is great for when you have a lot of repeat groups ? especially if the form is large.
Just add this code to the top of the default_repeatgroup.php file. ( In the case statement put the form ids using this template as the value to check against and set $groupLabel to the label to be shown for that form id. )...
PHP:
$formid = JRequest::getVar('formid');
switch($formid){
case '116':
$groupLabel = 'Breakout';
break;
case '117':
$groupLabel = 'Group';
break;
default:
$groupLabel = 'Entity';
break;
}
Now insert this html code just below the first div tag (<div class="fabrikSubGroup">) in the foreach loop and before the php open tag.
PHP:
<span="togglediv"><a class="toggleGroup" alt="Expand/Collapse Group" title="Expand/Collapse Group"><img style="margin-top:-4px;" src="images/buttons/arrow_UpDown.png" />Toggle</a><span class="togglehead"> <?php echo $groupLabel;?> </span> </span>
Just after the if/endif change the div tag to include a style attribute to hide the group
HTML:
<div class="fabrikSubGroupElements" style="display:none;">
Now add this javascript to the form_#.js file for the template (inside the document ready function) to work the magic ...
Code:
jQuery(document).on('click', '.toggleGroup', function() {
if(jQuery(this).siblings('.fabrikSubGroupElements').is(":visible")){
jQuery(this).siblings('.fabrikSubGroupElements').hide();
}else{
jQuery(this).siblings('.fabrikSubGroupElements').show();
}
});
That's about it. A sample of what the form will now look like is attached.
My original intent was to put the group name as the label (in the foreach loop) - but what was happening was that when a new group was added via ajax - it always used the last group name. (If anyone can tell me how to get around that, I would appreciate it.)