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:
- Show or hide the submenu
- 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:
var self = this;
($(self).html('▼')) ? $(self).html('▲') : $(self).html('▼');
var submenu = $(self).closest('tr').next('tr').find('table');
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!
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!