Question

I have this small toggle script, which toggles a panel, a class and text. I’m having trouble toggling the text though. It changes on the first click, but doesn’t change back afterwards.

Here is a fiddle. And here is the relevant code:

var visibleText = "Hide";
var hiddenText = "Show";
var textChange = $("#hidewrap a span");
var dynText = textChange.text() == visibleText ? hiddenText : visibleText;

textChange.text(dynText);

Thanks!

Answer 1

Firstly, here’s the answer.

Secondly, the explanation:
Your logic to check the text of the <span></span> element was in $.ready method. jQuery invokes this method internally once per page load, therefor the logic would only check the text value of the span once. I simply moved the logic check var dynText = textChange.text() == visibleText ? hiddenText : visibleText; into the .click so that the check is carried out every time the link is clicked, as opposed to once per page load.