Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Transform Gravity Forms sections into an accordion with jQuery - https://mircian.com/2016/11/06/transform-gravity-forms-sections-accordion/
.m_collapse_text, .show_collapse .m_expand_text, .m_section{
display: none;
}
.show_collapse .m_collapse_text {
display: inline;
}
jQuery( function($) {
var section = [];
var new_div;
// go through all the Gravity Forms fields
$('.gfield').each( function() {
// if the field is a section create a new array for fields and a new container to append the fields
if ( $(this).hasClass('gsection') ) {
if ( section.length > 0 ) {
section = [];
}
new_div = $('<div class="m_section"></div>');
new_div.insertAfter($(this));
} else {
// check if the field is the the kind you want to use for the accordion
if ( $(this).hasClass('gfield_price') ) {
// if it's the first element add a custom text to the section name
if ( section.length == 0 ) {
$(this).prevAll(".gsection:first").find('.gsection_title').append(' <span class="m_expand"><span class="m_expand_text">+ EXPAND</span><span class="m_collapse_text">- COLLAPSE</span></span>');
}
// add the field to the section array for reference
section.push($(this));
// move the field in the container for the section
if ( new_div ) {
new_div.append($(this));
}
}
}
});
// add the section click behavior
$('.gsection').click(function(e) {
e.preventDefault();
// toggle the text
$('.gsection').removeClass('show_collapse');
// hide all sections
$('.m_section').hide();
// if the section content is already visible just hide it ( toggle )
if ( $(this).next().is(':visible') ) {
return;
}
// show the content in the .m_section
$(this).next().show();
// toggle the text
$(this).addClass('show_collapse');
});
// hide all section containers on first run, can be replaced by a css rule
$('.m_section').hide();
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.