jQuery .show() is not working in Firefox

Question

The code below is suppose to have a menu which is hidden until #menubutton is clicked on, but clicking on it is not revealing the menu. It used to work but has stopped and I have no idea why. It works in Chrome but not in Firefox.

<a id='menubutton' href="#">
    <img src="/wp-content/themes/helpline/images/mobilemenu.png">
    <div id='menubuttontext'>
        Menu
    </div>
</a>
<ul id='menucontainer'>
    <li><a href='/'>Home</a></li>
    <li><a href='/services/'>Services</a></li>
    <li><a href='/about-us/'>About us</a></li>
    <li><a href='/procedures/'>Procedures</a></li>
    <li><a href='/call-back/'>Request a call back</a></li>
    <li><a href='/contact/'>Contact Us</a></li>
</ul>
<script type="text/javascript">
    var inout="0";
    $("#menubutton").click(function () {
        if(inout=="0"){
            $("#menucontainer").show("slow");
            inout="1";
        }else{
            $("#menucontainer").hide();
            inout="0";
        }
    });
</script>

CSS:

#menucontainer {
display: none;
}

Open the browser, `` to open the dev tools, select the `Console` tab, look for errors... — War10ck, Aug 07 '15 at 19:49
I agree with @War10ck I just threw this into a jsfiddle and it worked find for me. The problem must lie elsewhere. — Zac Braddy, Aug 07 '15 at 19:53
Side note: when you have an ``, you should cancel the click handler to ensure your browser doesn't jump and the URL bar doesn't change: `$("#menubutton").click(function(e) { e.preventDefault(); e.stopPropagation(); /* the rest of your stuff */ });` — Joe Enos, Aug 07 '15 at 19:55
As an additional side note, I could be wrong but I believe your menu button at the top is semantically invalid. I don't think you can have a block level element, the div, inside an inline element, the anchor tag. — War10ck, Aug 07 '15 at 19:55
OP, note that you can use `toggle()` instead of the convoluted flag variable in an `if` statement you currently have. That said, your current code should still be working. — Rory McCrossan, Aug 07 '15 at 20:00
@RoryMcCrossan Interesting. Learn something new everyday. I see what you mean now [http://stackoverflow.com/questions/1827965/...](http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct). I agree with you though. It's ugly and sends chills up my spine. I guess someone had a reason for allowing it though. In that case I amend my above statement to say if using HTML 4.01, the code you have is semantically invalid. Otherwise, ignore my previous comment. — War10ck, Aug 07 '15 at 20:01
It seems that you are using `var inout;` as a switch. You should use a boolean for that. `var inout = false;` and switch to `inout = true;` — supersize, Aug 07 '15 at 20:11
possible duplicate of [Jquery .show() not working in firefox](http://stackoverflow.com/questions/7267634/jquery-show-not-working-in-firefox) — michaelb958--GoFundMonica, Aug 25 '15 at 01:59

score 0 · Answer 1 · answered Aug 07 '15 at 20:09

Make sure you are loading jQuery. Try adding this to your head tag:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Here is a working example with jQuery loaded and your exact code (minus the image): http://jsfiddle.net/uyhvkphd/

score 0 · Answer 2 · edited May 23 '17 at 12:14

0

Thanks everyone. After other people tested it and it seemed to work, I realised it must be a browser issue. It works in other browsers, but Firefox doesn't like it.

This question explains why Jquery .show() not working in firefox

edited May 23 '17 at 12:14

Community

1
1

answered Aug 07 '15 at 20:25

Adam Ulivi

85
1
11

jQuery .show() is not working in Firefox

2 Answers2