Skip to content

Instantly share code, notes, and snippets.

@BruceMcKinnon
Last active March 26, 2024 15:13
Show Gist options
  • Save BruceMcKinnon/aab4fe7e102eafbbf2e3714405f690ba to your computer and use it in GitHub Desktop.
Save BruceMcKinnon/aab4fe7e102eafbbf2e3714405f690ba to your computer and use it in GitHub Desktop.
Collapsible Gravity Form Sections
/*
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: "-";
}
@SandaruwanDKM
Copy link

when we use ajax on the form submission, that m_section is getting removed. do we have any solution for this?

@Frykky
Copy link

Frykky commented Feb 21, 2024

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

@BruceMcKinnon
Copy link
Author

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment