Kirki Collapsible Controls

kirki-collapsible-controls.js

jQuery(document).ready(function($){

	// add collapse feature to 'typography' and 'spacing' controls
	var controlClasses = '.customize-control-kirki-typography, .customize-control-kirki-spacing';

	// get translated link title
	var linkTitle = kirki_collapsible_controls_object.link_title;

	// hide all '.wrapper' instances inside the above defined controls
	$(controlClasses).find('.wrapper').hide();

	// prepend a new '<span>' element to the control-label
	$(controlClasses).find('.customize-control-title').prepend( '<span class="show-kirki-control dashicons dashicons-plus"></span> ' );

	// add 'title' attribute to control-label
	$(controlClasses).find('.customize-control-title').attr('title', linkTitle);

	// on each click of the new element, we toggle the wrapper element to show or hide
	$(controlClasses).find('.customize-control-title').click(function(e) {

		// we go 2 parents up, to find the '.wrapper' element, and toggle it
		$(this).parents().eq(1).find('.wrapper').slideToggle('fast');

		// switch classes to display '+' and '-' dashicons
		$(this).find('.show-kirki-control').toggleClass('dashicons-plus dashicons-minus');

		// prevent default behaviour if element is clicked (page jump)
		e.preventDefault();
	});

});

kirki-collapsible-controls.php

<?php
/**
 * Plugin Name: Kirki Collapsible Controls
 * Plugin URI: -
 * Description: Adds a collapse/expand feature to some Kirki controls.
 * Author: Mo
 * Version: 1.0.0
 * Author URI: -
 * Text Domain: kirki-collapsible-controls
 * Domain Path: /lang
 */
if ( ! defined( 'ABSPATH' ) ) exit; // Exit if accessed directly

/**
 * Load plugins textdomain
 */
function kirki_collapsible_controls_textdomain() {
    load_plugin_textdomain('kirki-collapsible-controls', false, basename( dirname( __FILE__ ) ) . '/lang' );
}
add_action('init', 'kirki_collapsible_controls_textdomain');

// check if Kirki plugin is active
if ( ! class_exists( 'Kirki' ) ) {

	/**
	 * Enqueue script for custom customize control
	 */
	function kirki_collapsible_controls_customizer_enqueue() {

		// Register the script
		wp_register_script( 'kirki-collapsible-controls-js', plugins_url('js/kirki-collapsible-controls.js', __FILE__ ), array( 'jquery', 'customize-controls' ), false, true );

		// Localize the script with new data
		$translation_array = array(
			'link_title' => __( 'expand/collapse', 'kirki-collapsible-controls' ),
		);
		wp_localize_script( 'kirki-collapsible-controls-js', 'kirki_collapsible_controls_object', $translation_array );

		// Enqueued script with localized data
		wp_enqueue_script( 'kirki-collapsible-controls-js' );

	}
	add_action( 'customize_controls_enqueue_scripts', 'kirki_collapsible_controls_customizer_enqueue' );

	/**
	 * Add some custom styles to the customizer
	 */
	function kirki_collapsible_controls_customizer_styles() { ?>
		<style>
			.show-kirki-control.dashicons { vertical-align: bottom; }

			.customize-control-kirki-typography .customize-control-title:hover,
			.customize-control-kirki-spacing .customize-control-title:hover { color: #23282D; }
		</style>
		<?php
	}
	add_action( 'customize_controls_print_styles', 'kirki_collapsible_controls_customizer_styles', 999 );

}// END Kirki active