Template tweak to toggle group display

[Bauer]

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. )...

$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.

<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">&nbsp;<?php echo $groupLabel;?>&nbsp;</span>&nbsp;</span>

Just after the if/endif change the div tag to include a style attribute to hide the group

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

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.)

 

[Incremental]

Thank you Bauer for this tuto.
I tried to use it with an AJAX Form with 2 default Groups (not repeatable).
When I look with Firebug, your code is not present as there is no <div class="fabrikSubGroup"> in my page.
I probably do not have understand Group concept and possibilities, as the Wiki do not provide samples.
I just would like to have a simple Form used by Admin to reply to a Contact Form
This Form has 2 Groups (Contact, Reply) and should behave like this :

• by default only the Contact Group is showed (contact information) WITH a 'Reply' toggle button.
• clicking on the 'Reply' toggle button should make appear/dissapear the 2nd Group : Reply which contain answer fields and a button to send answer email

Could you help me for that ?
Thanks by advance.