-
-
Save BruceMcKinnon/aab4fe7e102eafbbf2e3714405f690ba to your computer and use it in GitHub Desktop.
/* | |
This JS creates collapsible Gravity Form sections breaks | |
IMPORTANT: | |
1 - Within the Gravity form, you must add the class collapsible to each section break. | |
2 - All fields within those section breaks must have the class collapsible_field | |
3 - You must include both the CSS and the JS | |
Original code by: https://mircian.com/2016/11/06/transform-gravity-forms-sections-accordion/ | |
Improved by: https://jsfiddle.net/snvvw2px/1/ | |
Further improvement by me! | |
*/ | |
jQuery( document ).ready(function() { | |
var $ = jQuery(); | |
var section = []; | |
var new_div; | |
// go through all the Gravity Forms fields | |
jQuery('.gfield').each( function() { | |
// if the field is a section create a new array for fields and a new container to append the fields | |
if ( jQuery(this).hasClass('gsection collapsible') ) { | |
if ( section.length > 0 ) { | |
section = []; | |
} | |
new_div = jQuery('<div class="m_section"></div>'); | |
new_div.insertAfter(jQuery(this)); | |
} else { | |
// check if the field is the the kind you want to use for the accordion | |
if ( jQuery(this).hasClass('collapsible_field') ) { | |
// if it's the first element add a custom text to the section name | |
if ( section.length == 0 ) { | |
jQuery(this).prevAll(".gsection:first").find('.gsection_title').append(' <span class="m_expand"><span class="m_expand_text"><i class="fa fa-chevron-down"></i></span><span class="m_collapse_text"><i class="fa fa-chevron-up"></i></span></span>'); | |
} | |
// add the field to the section array for reference | |
section.push(jQuery(this)); | |
// move the field in the container for the section | |
if ( new_div ) { | |
new_div.append(jQuery(this)); | |
} | |
} | |
} | |
}); | |
// add the section click behavior | |
jQuery('.gsection.collapsible').click(function(e) { | |
e.preventDefault(); | |
console.log('hit me!'); | |
if ( jQuery(this).next().is(':visible') ) { | |
jQuery('.gsection').removeClass('show_collapse'); | |
// hide all sections | |
jQuery('.m_section').hide("fast"); | |
//Otherwise, hide any visible content areas and display the clicked section | |
} else { | |
// toggle the text | |
jQuery('.gsection').removeClass('show_collapse'); | |
// hide all sections | |
jQuery('.m_section').hide("fast"); | |
// show the content in the .m_section | |
jQuery(this).next().show("fast"); | |
// toggle the text | |
jQuery(this).addClass('show_collapse'); | |
// Scroll to the section | |
var target = jQuery(this); | |
jQuery('html, body').animate({ scrollTop: target.offset().top}, 500); | |
} | |
}); | |
// hide all section containers on first run, can be replaced by a css rule | |
jQuery('.m_section').hide(); | |
}); | |
// On the form submit, expand collapsed sections if there is a Gravity validation error message displayed. | |
jQuery(document).on('gform_post_render', function(){ | |
jQuery('.m_section').each(function(i) { | |
// For pre Gravity Forms 2.5, use 'validation_message' | |
if (jQuery(this).children().find('.gfield_validation_message').length !== 0) { | |
jQuery(this).show("fast"); | |
jQuery(this).prev().addClass('show_collapse'); | |
} | |
}); | |
}); |
.m_collapse_text, .show_collapse .m_expand_text, .m_section{ | |
display: none; | |
} | |
.show_collapse .m_collapse_text { | |
display: inline; | |
} | |
.m_section { | |
grid-column: 1/-1; | |
} | |
span.m_expand span i { | |
font-size: 16px; | |
line-height: 24px; | |
vertical-align: top; | |
margin-left: 10px; | |
} | |
i.fa.fa-chevron-down:before { | |
content: "+"; | |
} | |
i.fa.fa-chevron-up:before { | |
content: "-"; | |
} |
Hi Angela.
I've made a couple of improvements to suit the latest version of Gravity forms. And I've published a test form at: https://test.ingeni.net/
If your form is still not working, make sure you check the browser developer console to see if there are any JS errors appearing on the page.
Thanks!...but it doesn't work :/
Hi Bruce
I have managed to get it working. Is there a way to highlight the collapsed section if there is an error in the gravity form field submission. Now, the user will need to expand all the collapsed sections to find out which field gives the error.
Thanks.
Regards
Angela
Hey Angela.
You can do this. I've updated the JS file to include a short function that used the Gravity Forms gform_post_render() function. This triggers when you submit the form. The JS then looks for any validation error messages and expands the appropriate section.
The validation is all done within Gravity Forms (eg, required fields or phone numbers that match a particular format), so you'll need to set that up within the form itself.
Cheers, Bruce.
HI Bruce
Thanks for the speedy response. Where can I find the short function that used the Gravity Forms gform_post_render() function. Is this function going to be in the Wordpress Theme file.
Regards
Angela
Hi Bruce
I found the function and will test it out.
Thanks.
Regards
Angela
Hi Bruce
I have used the new JS codes and the icon is now showing as "+" instead of the "down" icon.
When I expand the "+" to fill the fields, it will show as "<". I have left some compulsory fields empty to test if the sections are expanded, there is no expansion of the sections. All the sections still showed as "+". However, there is a message at the form - "There was a problem with your submission. Errors have been highlighted below.".
Not sure if I have missed out anything.
Appreciate if you could advise.
Thanks.
Regards
Angela
@AngelaP09 - There was a mistake on line 83 - the code has been updated.
@odil-io - All of the fields of the form are now required, including the State / Province / Region field.
Hi Bruce
I updated the code but it still didn't expand the whole section where there is error. All the sections are shown collapsed. There is a message "There was a problem with your submission. Errors have been highlighted below." at the top of the form.
Thanks.
Regards
Angela
@AngelaP09 - Have a look at https://test.ingeni.net/ to see it working.
If you are getting different results, then re-check the JS code and also the developer console of your browser to identify any JS errors.
Hi Bruce
The url is working. It expands all the sections where there is error.
Is the form used a gravity form?
@AngelaP09 - yes it is. Latest Gravity Forms. And this code will only work with Gravity Forms as it targets GF specific features.
Hi Bruce
Do I need to do any coding for the function "gform_post_render" before the display of the required fields will show?
Thanks.
Regards
Angela
@AngelaP09 - No you just make sure that JS function is being loaded onto the page. Make sure you CTRL-SHIFT-R in your browser to clear its cache - it may be holding an old version of the JS file. Maybe re-copy the entire JS code if it's doing weird things and there are no dev console errors.
Hi Bruce
It seems like there is no "gfield_validation_message' when I viewed the page source for the form. I am using Edge browser.
This is what is shown on the page source:
That's a bit weird. You could try changing line 81 from:
if (jQuery(this).children().find('.gfield_validation_message').length !== 0) {
to:
if (jQuery(this).children().find('.validation_message').length !== 0) {
Both classes are applied with validation messages appear in the form.
Hi Bruce
I just tested the form on the latest gravity form 2.5 and the sections are expanded when there is any error. But for my production server on GF 2.4.23, the codes do not work as there is no "gfield_validation_message".
Hi Bruce
I tried the change to "if (jQuery(this).children().find('.validation_message').length !== 0) {" for the GF 2.4.23. It didn't work.
I suppose it works only if it detects the "gfield_validation_message" which is only shown for GF 2.5.
Hi Bruce,
Thank you very much for providing this code, it saved me so much time on a rather lengthy form, and as it was for a charity I needed to keep costs down so no paid for plugins.
I do have one query though is it possible to scroll the user to the top of the section when it is opened, I'm finding at the moment that when a user completes a section and then clicks on the next one to open if the second section is longer than the first the browser window stays in the same position and essentially looks like it has scrolled to a certain point on the new section.
Thank you
Sibbo100
Hi @Sibbo100
This is fairly easy to do - have a look at lines 72-74 in the JS code. This will scroll the section to the top of the page when you click on it.
Cheers.
when we use ajax on the form submission, that m_section is getting removed. do we have any solution for this?
Hi, is this code still valid?
I tried it but it doesn't seem to work even in the test link https://test.ingeni.net/
TY
Hi, is this code still valid?
I tried it but it doesn't seem to work even in the test link https://test.ingeni.net/
TY
Hi. My apologies - I updated the theme file and it wiped out the enqueuing of the js and css files. It's working now. :)
Hi Bruce
I created a section break in the gravity form and add in "collapsible" in the custom CSS class and for the fields under this section I have put the "collapsible_field" in the field custom CSS class. However, when I preview the form, the section did not collapse.
Did I miss out something?
I appreciate your reply and help.
Thanks.
Regards
Angela