collapse fieldset when legend element clicked

Question

I have a jQuery function which toggles the visibility of the contents of a fieldset when its legend is clicked, leaving just the fieldset border (if there is one) and the legend showing:

$('legend.togvis').click(function() {
    $(this).siblings().toggle();
    return false;
});

It works great unless the fieldset contains text nodes.

<fieldset><legend class='togvis'>Click Me</legend>
  <p>I toggle when the legend is clicked.</p>
  But I'm a recalcitrant text node and refuse to toggle.
</fieldset>

In an effort to toggle the text nodes too I tried this:

$('legend.togvis').click(function() {
    $(this).parent().contents().not('legend').toggle();
    return false;
});

which works the same as the first function. And this:

$('legend.togvis').click(function() {
    $(this).parent().contents(":not(legend)").toggle();
    return false;
});

which throws the error

Message: 'style.display' is null or not an object
Line: 5557
Char: 3
Code: 0
URI: http://code.jquery.com/jquery-1.4.4.js

Any thoughts on how to get the entire contents of a fieldset (minus the legend) to toggle when the legend is clicked?

ETA Solution, with many thanks to Eibx

$('legend.togvis').click(function() { 
    $(this).parent().contents().filter(
        function() {  return this.nodeType == 3; }).wrap('<span></span>');//wrap any stray text nodes
    $(this).siblings().toggle(); 
}); 

Answer 1

You simply cannot make text disappear in HTML, JavaScript or CSS. It needs to be contained in a HTML element that will have display:none; applied or something similar.

The following code will wrap everything into a div, and move your legend to the same level as the div, and make the div show/hide when you click on the legend.

$("fieldset legend").click(function() {
  if ($(this).parent().children().length == 2)
    $(this).parent().find("div").toggle();
  else
  {
    $(this).parent().wrapInner("<div>");
    $(this).appendTo($(this).parent().parent());
    $(this).parent().find("div").toggle();
  }
});

• Code: http://jsbin.com/eleva3/edit
• Preview: http://jsbin.com/eleva3

Answer 2

Since text nodes are not elements, there is no way to toggle them.

As a last resort, if you cannot wrap them with an element, you can remove everything except the legend and add the elements and the text nodes back later:

$(document).ready(function() {
    $('legend.togvis').click(function() {
        var $this = $(this);
        var parent = $this.parent();
        var contents = parent.contents().not(this);
        if (contents.length > 0) {
            $this.data("contents", contents.remove());
        } else {
            $this.data("contents").appendTo(parent);
        }
        return false;
    });
});

You can test that solution here.