SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Question 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:
    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. #2
    SitePoint Zealot moretea's Avatar
    Join Date
    Jun 2004
    Location
    Texas, USA
    Posts
    118
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Found the answer! See http://stackoverflow.com/questions/5...2-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!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •