Toggle characters for navigation cues?
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:
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!
var self = this;
($(self).html('▼')) ? $(self).html('▲') : $(self).html('▼');
var submenu = $(self).closest('tr').next('tr').find('table');