I’m looking for a better way to hide a div when a custom field is empty. I’ve figured out how to hide the div but I have quite a few custom fields and I’d rather not write the code for each one.

(Note: I am using the Advanced Custom Fields plugin.)

So basically I want to hide the section title if the the field underneath it is empty.

Thanks

<div class="section-title">Services for Individuals</div>
    <div class="section-text">
        <?php the_field('services_for_individuals') ?>
    </div>
</div>

    <div class="section-title-business">Services for Businesses</div>    
        <div class="section-text">
            <?php the_field('services_for_businesses') ?>
        </div>
    </div>
</div>
<?php
    $value = get_field( "services_for_businesses" );
    if ( $value ) {
        echo $value;
    } else {
?>

<style type="text/css">
    .section-title-business {
        display:none; } 
</style>

<?php
}    
?>

1 Answer
1

Try this:

<?php 
     $business_services = get_field( "services_for_businesses" ); 
     //etc...
?>

<div class="section-title">Services for Individuals</div>

    <div class="section-text">
        <?php the_field('services_for_individuals') ?>
    </div>

    <?php if ( $business_services ) : ?>

    <div class="section-title-business">Services for Businesses</div>    
        <div class="section-text">
            <?php echo $business_services; ?>
        </div>
    </div>

    <?php endif; ?>

</div>

Further abstract the code to meet your needs if you have more than one field to show or hide.

Leave a Reply

Your email address will not be published. Required fields are marked *