Accordion Template Helper

/**

 * For the Accordion Template, this is a helper script

 * 

 * For support, please visit: https://www.facebook.com/groups/wpformsvip

 */

add_action( 'wp_head', function () { ?>

    <style>

    /* CSS magic to hide the page breaks and display section dividers as "buttons" based on the form class name */

		.wpf-accordion-form .wpforms-page,

		.wpf-accordion-form .wpforms-submit-container {

			display: block!important;

		}

		.wpf-accordion-form .wpforms-page-prev,

		.wpf-accordion-form .wpforms-page-next {

			display: none!important;

		}

		.wpf-accordion-form .wpforms-field-divider {

			padding: 0;

			border: 0;

		}

		.wpf-accordion-form .wpforms-field-divider h3 {

			font-size: 18px;

			padding: 25px;

			border: 1px solid #eee;

			border-radius: 4px;

			cursor: pointer;

		}

		.wpf-accordion-form div:not(.wpforms-layout-column) > .wpforms-field:not(.wpforms-field-divider) {

			display: none;

		}

		.wpf-accordion-form .wpforms-field-divider h3:before {

			content: '↓';

			margin-right: 10px;

		}

    </style>

<?php } );

// Enable section dividers to act like accordion toggles

function wpf_accordion_form() {

    ?>

    <script>

		( function( document, window, $ ) {

			$( '.wpf-accordion-form .wpforms-field-divider' ).on( 'click', function() {

				const $this = $( this );

				if ( $this.hasClass( 'active' ) ) {

					$this.removeClass( 'active' );

					$this.nextUntil( '.wpforms-field-divider' ).hide();

					return;

				}

				$this.nextUntil( '.wpforms-field-divider' ).show();

				$this.addClass( 'active' );

			})

		}( document, window, jQuery ) );

    </script>

    <?php

}

add_action( 'wpforms_wp_footer_end', 'wpf_accordion_form', 10 );