jquery hide div w/ empty header

by p337

HTML

<div id="testimonials">
     <h4></h4>

</div>
<button id="btnOn">On</button>
<button id="btnOff">Off</button>

CSS

#testimonials {
    background: #eeeeee;
    padding: 30px;
    width: auto;
    height: auto;
}
#testimonials h4 {
    font-size: 20px;
    line-height: 30px;
    font-family:"freight-big-pro";
    font-style: italic;
    border-bottom: 1px solid #666;
    padding-bottom: 20px;
    padding-top: 20px;
}
#testimonials h4 strong {
    display: block;
    font-family:"freight-sans-pro", sans-serif;
    font-style: normal;
    font-size: 12px;
}

JavaScript

//onload:
checkStyle();


$('#btnOn').click(function () {
    $('#testimonials h4').html("test");
    checkStyle();
});

$('#btnOff').click(function () {
    $('#testimonials h4').html("");
    checkStyle();
});



function checkStyle ()
{
    if ($('#testimonials h4').is(':empty')) 
        $('#testimonials').hide();
    else 
        $('#testimonials').show();    
}