Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Toggleable description for Advanced Custom Fields
<?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>
';
}
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.