title: jQuery toggle not hiding visible element
body: <p>I'm working on a Greasemonkey script, and I have roughly the following:</p>
  
  <p>Javascript:</p>
  
  <pre><code>var togglingLink = document.createElement("a");
  $(togglingLink)
      .attr('href', 'somelink')
      .html('&lt;div&gt;foo&lt;/div&gt;&lt;div style="display:none"&gt;bar&lt;/div&gt;');
  
  $(togglingLink).children().toggle();
  // Then I insert it into the page.
  </code></pre>
  
  <p>Which makes this HTML:</p>
  
  <pre><code>&lt;a href="somelink"&gt;
      &lt;div&gt;foo&lt;/div&gt;
      &lt;div style="display:none"&gt;bar&lt;/div&gt;
  &lt;/a&gt;
  </code></pre>
  
  <p>The $().toggle() is only making the hidden div visible, it's not hiding the visible div.  What am I missing here?</p>
  
  <hr>
  
  <p><a href="https://stackoverflow.com/questions/19734692/jquery-toggle-not-hiding-visible-element#comment29321828_19734692">James' jsfiddle</a> does work.  But the same code in my Greasemonkey script isn't working.</p>
  
  <p>Per bobek's answer, I also tried changing the divs into spans, and that didn't fix it for me.</p>