Question

I have the following code for toggling swapping from an English div to a Spanish div and vice versa:

$("#spanishlink").click(function () {
$("#spanishtext").fadeToggle ("fast");
$("#englishtext").fadeToggle ("fast");
});

$("#englishlink").click(function () {
$("#englishtext").fadeToggle ("fast");
$("#spanishtext").fadeToggle ("fast");
})

The CSS is simply:

#englishtext {
    display:none;
}

And my HTML:

<a id="englishlink" href="#">English</a>
<a id="spanishlink" href="#">Espanol</a>

<div id="englishtext">
Blah Blah Blah
</div>

<div id="spanishtext">
Blah blah blah
</div>

It just doesnt seem to work for me – the Spanish div dissapears but the English does not re-appear. This happens no matter what link I click.

Ive checked that all the spelling is correct and that JQuery library is linked, but this is ok. Does anyone have any suggestions?

Answer 1

It’s possible that in the scenario in which it doesn’t work (contra all the jsfiddles which indicate it does), it’s because the browser rendering engine is choosing to prioritize the CSS in which #englishtext is always hidden. I encountered a similar issue today when trying to toggle with jQuery show() and hide() but the CSS had the object set to visibility: hidden.