Hiding a div when the_field is empty

Question

<div class="full-width awards">
    <h2><span>Awards</span></h2>
    <div id="accordion" class="accordion awards-list">

    <?php if (get_field( 'awards_&_festivals' ) ) : ?>

    <h3 class="award-title" ><span class="down-icon">Awards &amp; Festivals</span></h3>
    <div class="award-content" >
        <?php the_field( 'awards_&_festivals' ); ?>
    </div>

    <?php endif; ?>

</div>

I wanted to hide the awards div when the_field does not have any content any idea on how to make this happen? Much appreciated.

Possible duplicate of [How do I check if an HTML element is empty using jQuery?](http://stackoverflow.com/questions/6813227/how-do-i-check-if-an-html-element-is-empty-using-jquery) — Anthony, Jan 10 '17 at 03:57
To begin with you have 3 opening `div` tags and you only have 2 closing. — Nytrix, Jan 10 '17 at 03:58
Since `the_field($field_name)` is equal to `echo get_field($field_name);` as noted in the docs, you can easily do as the docs demonstrates and use `if(get_field($field_name)) { //show html section here }` and not print anything at all for that section if empty. Then you don't have to rely on browser features that can be disabled by the user if desired. — Rasclatt, Jan 10 '17 at 05:02

score 1 · Answer 1 · answered Jan 10 '17 at 03:54

1

With css you can hide it with :empty property

like

.someClass:empty {
    display:none;
}

answered Jan 10 '17 at 03:54

Jishnu V S

8,164
7
27
57

score 1 · Accepted Answer · answered Jan 10 '17 at 11:05

1

We can do it like this -

if ($(".award-content").html() == "") {
    $('.awards').hide();
}

answered Jan 10 '17 at 11:05

Vee Mandke

578
1
11
28

score 0 · Answer 3 · answered Jan 10 '17 at 11:13

You can verify with PHP if has content and ignore div. With CSS you can use :empty selector http://www.w3schools.com/cssref/sel_empty.asp

.award-content:empty {
    display: none;
}

Or change you PHP code:

<div class="full-width awards">
    <h2><span>Awards</span></h2>
    <div id="accordion" class="accordion awards-list">

    <?php if (!empty(get_field( 'awards_&_festivals' ) )) : ?>

    <h3 class="award-title" ><span class="down-icon">Awards &amp; Festivals</span></h3>
    <div class="award-content" >
        <?php the_field( 'awards_&_festivals' ); ?>
    </div>

    <?php endif; ?>

</div>

Hiding a div when the_field is empty

3 Answers3