jQuery toggle not hiding visible element

Question

I'm working on a Greasemonkey script, and I have roughly the following:

Javascript:

var togglingLink = document.createElement("a");
$(togglingLink)
    .attr('href', 'somelink')
    .html('<div>foo</div><div style="display:none">bar</div>');

$(togglingLink).children().toggle();
// Then I insert it into the page.

Which makes this HTML:

<a href="somelink">
    <div>foo</div>
    <div style="display:none">bar</div>
</a>

The $().toggle() is only making the hidden div visible, it's not hiding the visible div. What am I missing here?

James' jsfiddle does work. But the same code in my Greasemonkey script isn't working.

Per bobek's answer, I also tried changing the divs into spans, and that didn't fix it for me.

Hmm, let me update with more specifics of my usage then. There must be a quirk between what I'm doing in my script and my example code here. — Keen, Nov 01 '13 at 20:18
I didn't know you could pass a `document.createElement` through the jQuery function... — Jace Cotton, Nov 01 '13 at 20:23
@hilarudeens http://stackoverflow.com/questions/1827965/is-putting-a-div-inside-an-anchor-ever-correct — bobek, Nov 01 '13 at 20:24
@JaceCotton it's pretty pointless, as you could just do `$('')` to achieve the exact same effect. — Rory McCrossan, Nov 01 '13 at 20:25
@Keen even with your updated code, it still works http://jsfiddle.net/ZHAuP/ — James Montagne, Nov 01 '13 at 20:25
@bobek Using block element "div" inside a inline element is semantic violation only. If we want, we can do and by using style we can force browser and we can show. I don't want take this conversation in another way. cool — HILARUDEEN S ALLAUDEEN, Nov 01 '13 at 20:36
@JamesMontagne That's really weird. I see it work fine in that jfiddle, but it fails in my Greasemonkey script. Augh. — Keen, Nov 01 '13 at 20:39

score 2 · Accepted Answer · answered Nov 08 '13 at 22:19

I finally figured this out. I was actually running $().toggle(); prior to appending the element to the page. This is what was causing jQuery to not toggle as expected. Once I made it the $().toggle(); happened after appending, then it worked properly.

bobek · Answer 2 · 2013-11-01T20:29:26.793

1

Having a <div> inside <a> is not valid in HTML < 5 and some browsers might not be able to work with it. Change your <div> to <span> and see if it works then.

edited Nov 01 '13 at 20:29

answered Nov 01 '13 at 20:22

bobek

8,003
8
39
75

It seems to be valid in HTML5. Go here http://validator.w3.org/#validate_by_input then paste ` a
a
`. – Nov 01 '13 at 20:27
@wared Yes but not in older versions. If he's doing it in IE8 it might not work. – bobek Nov 01 '13 at 20:29
I'm doing this in Firefox 24. – Keen Nov 01 '13 at 20:33
Tried with Firefox 25.0, works fine. Does toggle on other elements (non-nested) work for you? – Johannes H. Nov 01 '13 at 20:38
@JohannesH. Yeah, toggling random elements in the webpage works fine. For some reason my visible div refuses to hide in my script. – Keen Nov 01 '13 at 21:08
Are you sure that there is no additional CSS applied in your actual code that might interfere? Depending on how you're telling Greasemonkey/Scriptish to execute the code, it might get loaded afterwards and make that div visible again. It's clear this is not a pure JS issue if the fiddles work - so some additional background info might help. – Johannes H. Nov 01 '13 at 21:22
@JohannesH. I'll work on that over the weekend. It's part of a 150-line script, and I thought I'd pared it down to the key elements here. Obviously I missed something. – Keen Nov 01 '13 at 21:43

jQuery toggle not hiding visible element

2 Answers2