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

Reported by:	anonymous	Owned by:	anonymous
Priority:	low	Milestone:	1.next
Component:	effects	Version:	1.5.1
Keywords:		Cc:
Blocked by:		Blocking:

Description

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.

Attachments (0)

Change History (4)

Changed March 14, 2011 07:33PM UTC by anonymous comment:1

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

Oh, and I am using Firefox 4.0RC1.

Changed March 16, 2011 08:57PM UTC by anonymous comment:2

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

Changed March 30, 2011 05:27PM UTC by rwaldron comment:3

component:	unfiled → effects
owner:	→ anonymous
status:	new → pending

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.

Changed March 30, 2011 07:18PM UTC by addyosmani comment:4

priority:	undecided → low
resolution:	→ invalid
status:	pending → closed

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.

Side navigation