Question

In my options panel I have a section where the user can enter their Twitter username. Currently if the value for that field is empty, the Twitter icon disappears on my website, which is good as it means the div class has been successfully hidden. However, when I enter a username in the field, the div class still stays hidden.

This is the jQuery I have at the moment:

<script type="text/javascript">
$(document).ready(function() {
if($('mytheme_twitter:empty')){$('.twitter').hide();}   
});
</script>

I think something must be missing from it. Do I need to add another function? If so, where do I put it? I’m a bit of a jQuery noob.

Answer 1

Firstly :empty is the wrong selector for this use case.

:empty Select all elements that have no children (including text nodes

Change you logic to check if the value of the imput is empty.

if($('.mytheme_twitter').val() === '' ){$('.twitter').hide();} 

You need to write up a change event to handle that case..

$('mytheme_twitter') has to be   $('#mytheme_twitter')  If ID OR $('.mytheme_twitter') If Class

//

 <script type="text/javascript">
    $(document).ready(function() {

        if($('.mytheme_twitter').val() == '' ){$('.twitter').hide();}  

        $('.mytheme_twitter').on('change' , function() {

             if( this.value != ''){

                   $('.twitter').show(); 
              }
              else{
                   $('.twitter').hide(); 
             }
        });
      });
    </script>