CODEWITHSUNDEEP
jquerywordpressjquery-uishow-hidecustom-fields
M P
M P

Reputation: 915

Show/hide HTML element when custom field is empty

I have custom fields on the page which are gathered from the user input on the form. Every time there will be inserted ONLY ONE (customfield1 and customfield2). I don't know how to hide the whole div (class="customfield") if the customfield1 or customfield2 is empty. I cannot change customfield to different class or id.

Thank you very much!

<div class="customfield">
    <h4>Custom field title 1</h4>
    <?php if( get_post_meta($post->ID, "customfield1", true) ): ?>
    <?php echo get_post_meta($post->ID, "customfield1", true); ?>
    <?php endif; ?>                     
</div>

<div class="customfield">
    <h4>Custom field title 2</h4>
    <?php if( get_post_meta($post->ID, "customfield2", true) ): ?>
    <?php echo get_post_meta($post->ID, "customfield2", true); ?>
    <?php endif; ?>                     
</div>

Upvotes: 0

Views: 1446

Answers (1)

Explosion Pills
Explosion Pills

Reputation: 191749

$(".customfield").filter(function () {
   return $.trim($('p', this).text()) === '';
}).hide();​

This will hide all .customfield elements containing a <p> that has no text.

Upvotes: 2

Related Questions