Multi Step Donation Form

/**

 * This snippet provides a foundation for converting the donation form

 * into a multi-step donation form.

 */

add_action( 'charitable_donation_form_before', function() {

	?>

<script>

( function($) {

	$(document).ready( function() {

		var section = 1;

		var current_section = 1;

		var last_section;

		$('#charitable-donation-form > .charitable-form-fields > .charitable-fieldset').each( function(fieldset) {

			var $fieldset = $(this);

			$fieldset.attr('data-section', section);

			if (section !== current_section) {

				$fieldset.addClass('charitable-hidden');

			}

			section += 1;

		});

		last_section = section;

		$('.charitable-submit-field button').addClass('charitable-hidden');

		$('.charitable-submit-field').append('<div class="button charitable-button button-primary btn next"><a href="#">Continue</a></div>');

		$('.charitable-submit-field').append('<div class="button charitable-button button-secondary btn inverted"><a href="#" class="hidden">Back</a></div>');

		function updateSection(previous_section) {

			$('.charitable-fieldset[data-section=' + previous_section + ']').addClass('charitable-hidden');

			$('.charitable-fieldset[data-section=' + current_section + ']').removeClass('charitable-hidden');

			if ( last_section === current_section ) {

				$('.charitable-submit-field .button.back a').removeClass('charitable-hidden');

			} else if ( 1 === current_section ) {

				$('.charitable-submit-field .button.back a').addClass('charitable-hidden');

			}

		}

		$('body').on('click', '.charitable-submit-field .button.next a', function(e){

			e.preventDefault();

			previous_section = current_section;

			current_section += 1;

			updateSection(previous_section);

		});

		$('body').on('click', '.charitable-submit-field .button.back a', function(e){

			e.preventDefault();

			previous_section = current_section;

			current_section -= 1;

			updateSection(previous_section);

		});

	});

})( jQuery );

</script>

	<?php

});