I want to hide <div> section "softdown" if custom field is not specified

Viewed 93

I want to hide the Div section if the custom field is not selected or empty!

<div class="softdown">
  <span class="postdownlink">
    <i class="fa fa-download" aria-hidden="true"></i>
    <?php echo get_post_meta($post->ID, 'postdownlink', true); ?>
  </span>
</div>
2 Answers

Within PHP, you can check if a variable is empty using a function called empty. So, you could do something like this:

<?php if(!empty($iamempty)){ ?>

<h1>I won't be shown</h1>

<? } ?>

So, for you to implement this into your code, you could do the following.

<?php if(!empty(get_post_meta($post->ID, 'postdownlink', true))){ ?>

<div class="softdown">
  <span class="postdownlink">
    <i class="fa fa-download" aria-hidden="true"></i>
    <?php echo get_post_meta($post->ID, 'postdownlink', true); ?>
  </span>
</div>

<? } ?>

The above code will only display the div (The HTML content between the PHP tags) if the get_post_meta returns a value that is not empty.

If it needs to be done in real time, you can do that this way:

This can be added to the top of your JS file:

    var inputChange = function (){
        ($('input#photo').val().length === 0) { 
               // Hide the element  On keyup check the value of the input if length is 0 meaning empty hide the div otherwise show.
               $('div.sofdown').hide(); // Using hide()
               //Or using fadeOut();
               $('div.sofdown').fadeOut(1000);
            }
    }
//Initiate to hide the div if there is no text in input.
inputChange();

After that initial state will be hidden

This should be add at the end of the JS file

$('input#photo').keyup(function() { 
    //Call function
    inputChange();
}
Related