html() not updating until I scroll the page

html() not updating until I scroll the page

I have a custom font, and a class that I put on a div that replaces any text in the div with the custom font icon...

This div is supposed to switch between a search icon and an x icon. Sometimes, the icon doesn't change until I nudge the page up or down... can't figure out why? 

Here's the div:
  1. <a href="/search/" class="ficon" id="search-trigger">B</a>

and here's the jquery:
  2. jQuery(document).ready(function(){
  3. jQuery("#search-trigger").click(function(e){
  4. if(jQuery("#search-trigger").html() == "B"){
  5. jQuery("#search-trigger").html("G");
  6. }
  7. else{
  8. jQuery("#search-trigger").html("B");
  9. }
  10. jQuery("#search-wrapper").toggle();
  11. e.preventDefault();
  12. });
  13. });