Question

I’m stuck with my jQuery “functions” (I know basics only).
So I’m working on a responsive website and when the user press an arrow icon → [>] (a#side-toggle), the menu (#header-toggle) slides out, and the icon slides on the left to stay visible, and the text changes to change the arrow → [<].

When I click again on this icon, the menu goes back to where it came and the icon is → [>]. Perfect.

In the first function, an overlay DIV is displayed, to avoid user to press on the content while using the menu. When you click on this overlay, the menu slides back and the overlay disapears. Normal. But the text doesn’t change, it’s stuck like that → [<]

When I click again on the text to show the menu, it changes to this → [>], and the menu doesn’t show up (the function has returned to its original state actually). If I click again, the function toggles, as it should.

I need to fix this, the user should only press once on this icon to show the menu.

Clean my code if it’s possible, because I think it’s a mess too, haha

Here’s the jsfiddle !

The problem is in the JS, here’s an extract:

$('#side-overlay').click(function() {
    $(this).hide();
    $("#header-toggle").animate({ 
        left: "-200px",
        boxShadow: "0px 0px 0px 0px rgba(0,0,0,0)"
      }, { duration: 700, easing: "easeInOutBack", queue: false });
    $("#side-handler").animate({ 
        left: "0px",
      }, { duration: 700, easing: "easeInOutBack", queue: false });
    $("a#side-toggle").text($(this).text() == '>' ? '<' : '>');
});

Thanks for your help!

Answer 1

Inside your slide-overlay .click() function:

$('#side-overlay').click(function() {
    //...
    $("a#side-toggle").text($(this).text() == '>' ? '<' : '>');});​
});

$(this) actually refers to $('#side-overlay'), so since the target is wrong, the arrow does not change. You must remove $(this) and replace it with the proper target…

$("a#side-toggle").text($("a#side-toggle").text() == '>' ? '<' : '>');});​

See it working here: http://jsfiddle.net/4HXEm/4/