Changing CSS Display property based on jQuery.html()

Question

I'm writing a simple script that detects a language and then changes the visibility of two menu items accordingly. (test site: women.semeasy.com)

Here's the code I've written:

<script type="text/javascript">
jQuery(document).ready(function(e) {


if (jQuery('#slogan').html() == 'Centro de Información'){

    jQuery('#menu-item-862').css('display', 'block !important');
    jQuery('#menu-item-743').css('display', 'none !important');

};
});
</script>

What it's supposed to do is check the slogan to see if it's in Spanish. If it is, then it hides the "En Espanol" link and displays the "In English" one...

Pretty straight forward, but it's not working :( any suggestions are greatly appreciated!

Answer 1

Use the appropriate methods for your purpose

jQuery('#menu-item-862').show();
jQuery('#menu-item-743').hide();

Answer 2

You can't apply !important with jquery. You'll need to remove that. If you need !important, create a class with important and then use addClass.