This seems like it should be so simple! I have a <nav> element with Unicode characters to represent submenus; each Unicode character is wrapped in an <a class="modulator"> tag. Clicking on the <a class="modulator"> element should:

1. Show or hide the submenu
2. Toggle the Unicode character between a "down" triangle and an "up" triangle

The first part is easy, but not the second! Here's my code:
Code:
    $('a.modulator').click(function() {
        var self = this;
        ($(self).html('&#x25BC;')) ? $(self).html('&#x25B2;') : $(self).html('&#x25BC;');
        var submenu = $(self).closest('tr').next('tr').find('table');
        $(submenu).slideToggle(500,function() {
        });
    });
I can toggle the character on the first click, but not thereafter. I have tried putting the ternary operator in the slideToggle callback as well, but that doesn't seem to work. Any suggestions? TIA!