When using toggle(), my DIV tag shows then hides again

[anonymous]

This is the jQuery code I'm using:

var flip = 0; $(".toggle").click(function() { $(".instructions").toggle( flip++ % 2 == 0 ); });

where the class name "toggle" belongs to an <a> element, and the class name "instructions" belongs to a <div> tag. The display property of the <div> tag is set to none.

Now, when I click on the <a> element, the <div> tag appears, then instantly disappears.

[anonymous]

I borrowed the code from one of the examples in the documentation. The example worked.

Oh, and I am using Firefox 4.0RC1.

[anonymous]

I found a workaround: Add href="#" to the <a> tag.

[Rick Waldron]

Thanks for taking the time to contribute to the jQuery project! Please provide a reduced jsFiddle test case to help us assess your ticket!

Additionally, test against the jQuery Edge version to ensure the issue still exists.

[addyosmani]

The reason the original example described by the OP wasn't working is that they neglected to include a valid href in their a tag. The example in our docs uses button elements instead and didn't require it, so I think it's as simple as it being a minor coding error on their part. The rest of the behavior with toggle() is working absolutely fine.