Skip to main content

Bug Tracker

Side navigation

#11436 closed feature (invalid)

Opened March 04, 2012 06:59PM UTC

Closed March 04, 2012 07:07PM UTC

Last modified June 06, 2012 01:00PM UTC

toggle() doesn't really toggle CSS "display" value

Reported by: cFreed Owned by:
Priority: undecided Milestone: None
Component: unfiled Version: 1.7.1
Keywords: Cc:
Blocked by: Blocking:
Description

When an element:

  • has CSS "display: block"
  • but is currently hidden, since it is a child of a hidden parent

Then toggle does NOT change its CSS to "display: none".

This behaviour finally conforms to what the doc says:

<<If the element is initially displayed, it will be hidden; if hidden, it will be shown>>

But it is ambiguous, since we might expect toggle() to merely substitute none to display and vice-versa.

Here is an example where this alternative behaviour should be preferred: http://jsfiddle.net/bT2uE/.

Don't know if it is bug or feature...

Thanks for your attention.

Attachments (0)
Change History (5)

Changed March 04, 2012 07:07PM UTC by rwaldron comment:1

resolution: → invalid
status: newclosed

toggle is a shorthand to hide/show or vice versa and those functions look at the element's current display value and proceed accordingly. The overhead of checking parent elements would be vastly inefficient. This seems more like question for SO or the forums.

Changed March 04, 2012 08:52PM UTC by cFreed comment:2

Replying to [comment:1 rwaldron]:

The overhead of checking parent elements would be vastly inefficient.

I really don't understand: you seem to be responding to THE EXACT OPPOSITE of what I said!

What I noticed means that, with its current behaviour, toggle() IS checking parent elements.

And it is what I consider to be a problem.

In my opinion, the most obviously expected behaviour of toggle() should be to set "display: none" when it founds "display: block", no matter the element is currently hidden or not.

toggle is a shorthand to hide/show or vice versa and those functions look at the element's current display value and proceed accordingly.

I totally agree.

So toggle() should work exactly as hide() does when current state is "display: block", no?

But it does NOT, as clearly demonstrated here: http://jsfiddle.net/bT2uE/.

Thanks for your attention.

Changed March 04, 2012 09:06PM UTC by rwaldron comment:3

_comment0: If you remove `style="display:display;"` from the innermost UL the list behaves as expected.1330895263663279

If you remove style="display:display;" from the innermost UL the list behaves as expected.

http://jsfiddle.net/rwaldron/bT2uE/1/

Changed March 04, 2012 11:33PM UTC by cFreed comment:4

Replying to [comment:3 rwaldron]:

If you remove style="display:display;" from the innermost UL the list behaves as expected. http://jsfiddle.net/rwaldron/bT2uE/1/

Not at all.

Sorry for the erroneous code you pointed, but correcting it does not change anything.

In the other hand, you may look at this different and simpler example (http://jsfiddle.net/PHttV/4/), which probes that:

  • toggle() does NOT change "display:block" to "display:none" on a hidden element
  • while hide() does

Changed June 06, 2012 01:00PM UTC by Crystark comment:5

[REOPEN PLEASE]

I'm having the same problem here. Could you take an other look at this problem ?

cFreed is right by explaining :

Try to ".toggle()" an element that has "display:block" but is child of an element with "display:none". It's display status doesn't change to "display:none" and thus, when the parent appears, it's still visible.

Now try to apply ".hide()" on the element : it works.

The selector ":hidden" you're using in the toggle function returns true if the element has "display:block" and a parent "display:none". Shouldn't the toggle function use (affectedElement.css('display') != 'none') to see what function "toggle()" should call ?