Toggleable description for Advanced Custom Fields

togglable-acf-description.php

<?php

    /**
    * Hide ACF descriptions that have more characters than you deem feasible to display directly.
    * Change the fewbricksToggleableDescriptionMinCharLength variable to 0 if you want all descriptions
    * to be hidden.
    * At its most simple, place this code in functions.php. But you should really try to use some namespacing
    * or OOP approach to it instead.
    */

    add_action('admin_head', 'make_descriptions_togglable');

     /**
	 *
	 */
	function make_descriptions_togglable()
	{

		echo '
			<style>
			.acf-field p.description {
				display: none;
			}
			
			.fewbricks-description-toggler {
				margin-left: 3px;
				color: #444;
			}
			
			.fewbricks-description-toggler:hover {
				color: #000;
			}
			
			</style>
		';

		echo '
			<script>
			jQuery(document).ready(function() {
			    
			    var fewbricksToggleableDescriptionMinCharLength = 100;
			    
			    jQuery(\'.acf-field p.description\').each(function (index, elm) {
			    
			    	var $descriptionElm = jQuery(elm);
			    
			    	if($descriptionElm.text().length > fewbricksToggleableDescriptionMinCharLength) {
			        
						var $descriptionTriggerElm = jQuery(\'<a href="#" class="fewbricks-description-toggler dashicons dashicons-info"></a>\');
						
						$descriptionElm.data(\'visible\', false);
						$descriptionTriggerElm.data(\'descriptionElm\', $descriptionElm);
	
						$descriptionTriggerElm.on(\'click\', function(event) {
						
							event.preventDefault();
	
							var $myDescriptionElm = jQuery(this).data(\'descriptionElm\');
	
							if($myDescriptionElm.data(\'visible\') !== true) {
							
								$myDescriptionElm.data(\'visible\', true);
								$myDescriptionElm.show();
							
							} else {
	
								$myDescriptionElm.data(\'visible\', false);
								$myDescriptionElm.hide();
					
							}
	
						});
	
						$descriptionElm
							.parents(\'.acf-label:first\')
							.find(\'label:first\')
							.append($descriptionTriggerElm);
			        
			    	} else {
    					// Description is not long enough to hide
    
    					$descriptionElm.show();
    
    				}

				});

			});
			</script>
		';

	}