Toggle characters for navigation cues?

JavaScript
1

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:

    $('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!

2

Found the answer! See http://stackoverflow.com/questions/5654838/need-to-replace-characters-with-html-codes-for-example-8212-in-small-pie. The solution seems to be to test the dropdown menu element for visibility, then toggle the characters in the callback. Life is good!