Toggles/Visible/Hidden check inccorect on empty tag

Reported by:	Kilandor	Owned by:
Priority:	low	Milestone:
Component:	effects	Version:	1.3.2
Keywords:		Cc:
Blocked by:		Blocking:

Description

There is a problem with any toggle()

When a tag is empty, and you try to toggle() its state it remains hidden, and no change is made.

If you perform a is.(':hidden') it will return true.

Maybe an example is best.

function editDesc()
{
	$('#something').toggle();
	$('#somethingedit').toggle();
}

function submitDesc()
{
	content = $('#somethingedit').val();
	$('#somethingedit').toggle();
	content = content.replace(\\"\\\\n\\",\\"<br>\\");
	$('#something').html(content);
	$('#something').toggle();
}

<div #id="something"></div>
<textarea id="somethingedit"></textarea>

This is just a rough example, If you attach editDesc to a button toggle the fields (assume textarea is being hidden by css by default) nothign changes to the div, and the textarea shows up. So you submit(with a button and submitDesc attached) It updates the div, but it sitll remains hidden. But if you click the button to edit again, both the div, and the textarea will show then, and if clicked again they will hide.

Toggle should change the css of a tag regardless if it has text in the field or not, a simple or anything in the div to start fixes this problem but its lame to have to do that.

This was noticed on FF 3.0.6, WinXp Sp3. I didn't test it on any other

Attachments (0)

Change History (4)

Changed October 14, 2009 03:13AM UTC by dmethvin comment:1

component:	unfilled → fx

If there is no content in an element that has no padding or border, its height/width is 0 and therefore it's hidden by the definition of

:hidden

. Whether that's the right behavior I am not sure; it seems to make some sense.

Changed November 19, 2010 02:09AM UTC by dmethvin comment:2

keywords:	→ needsreview
status:	new → open

Changed December 18, 2010 06:08PM UTC by iliakan comment:3

If an empty, but potentially visible element will be considered visible by jQuery, then what to do with elements which height/width = 0 ? They are also potentially visible.

It seems reasonable to document the visibility feature so that people take it's behavior into account.

Changed December 19, 2010 04:02AM UTC by jitter comment:4

description:	There is a problem with any toggle() \ \ When a tag is empty, and you try to toggle() its state it remains hidden, and no change is made. \ If you perform a is.(':hidden') it will return true. \ \ Maybe an example is best. \ \ function editDesc() \ { \ $('#something').toggle(); \ $('#somethingedit').toggle(); \ } \ \ function submitDesc() \ { \ content = $('#somethingedit').val(); \ $('#somethingedit').toggle(); \ content = content.replace(\\"\\\\n\\",\\"<br>\\"); \ $('#something').html(content); \ $('#something').toggle(); \ } \ \ <div #id="something"></div> \ <textarea id="somethingedit"></textarea> \ \ This is just a rough example, If you attach editDesc to a button toggle the fields (assume textarea is being hidden by css by default) nothign changes to the div, and the textarea shows up. So you submit(with a button and submitDesc attached) It updates the div, but it sitll remains hidden. But if you click the button to edit again, both the div, and the textarea will show then, and if clicked again they will hide. \ \ Toggle should change the css of a tag regardless if it has text in the field or not, a simple   or anything in the div to start fixes this problem but its lame to have to do that. \ \ This was noticed on FF 3.0.6, WinXp Sp3. I didn't test it on any other → There is a problem with any toggle() \ \ When a tag is empty, and you try to toggle() its state it remains hidden, and no change is made. \ If you perform a is.(':hidden') it will return true. \ \ Maybe an example is best. \ {{{ \ function editDesc() \ { \ $('#something').toggle(); \ $('#somethingedit').toggle(); \ } \ \ function submitDesc() \ { \ content = $('#somethingedit').val(); \ $('#somethingedit').toggle(); \ content = content.replace(\\"\\\\n\\",\\"<br>\\"); \ $('#something').html(content); \ $('#something').toggle(); \ } \ \ <div #id="something"></div> \ <textarea id="somethingedit"></textarea> \ }}} \ This is just a rough example, If you attach editDesc to a button toggle the fields (assume textarea is being hidden by css by default) nothign changes to the div, and the textarea shows up. So you submit(with a button and submitDesc attached) It updates the div, but it sitll remains hidden. But if you click the button to edit again, both the div, and the textarea will show then, and if clicked again they will hide. \ \ Toggle should change the css of a tag regardless if it has text in the field or not, a simple   or anything in the div to start fixes this problem but its lame to have to do that. \ \ This was noticed on FF 3.0.6, WinXp Sp3. I didn't test it on any other
keywords:	needsreview
milestone:	1.4
priority:	major → low
resolution:	→ worksforme
status:	open → closed

I can't reproduce what is described in the report with this test case. Both the div and textarea are getting shown/hidden with toggle for me. And the .is(":hidden") check works too.

Replying to [comment:3 iliakan]:

If an empty, but potentially visible element will be considered visible by jQuery, then what to do with elements which height/width = 0 ? They are also potentially visible. It seems reasonable to document the visibility feature so that people take it's behavior into account.

I think the behavior what is considered visible and what not is well documented here already http://api.jquery.com/hidden-selector/ or did I miss your point?

Side navigation