6

Ok, so I have a div with a few elements in it and I want to toggle them all, but in my jquery code I have to call all these elements. How can I select them instead of call all of the elements ids? I have to toggle something like this:

<div id="divtotoggle">
    <input type="text" id="textinput" />
    <input type="button" id="button />
    <div id="feedback"></div>
</div>
3
  • What do you mean toggle?
    – calebds
    Feb 7, 2012 at 19:01
  • Nice, just found out there is an inside tag over here.
    – gdoron
    Feb 7, 2012 at 19:09
  • 1
    You have a missing double quote " on line 3
    – Kevin B
    Feb 7, 2012 at 19:13

4 Answers 4

12

If you only want to toggle the immediate children of your <div> element, you can use the aptly-named children() method to match them:

$("#divtotoggle").children().toggle();

If you want to toggle all the descendant elements (which does not make much sense to begin with, as others rightfuly pointed out in the comments below), you can use an All selector:

$("#divtotoggle *").toggle();
6
  • Well, if you want to actually match all the descendant elements and you cannot use any selector (because you really want everything), the All selector will be roughly as slow as the DOM traversal routine you would write by hand... It does accumulate elements though, so there might be a bottleneck there if the page is really complex. Feb 7, 2012 at 19:06
  • why not .childern().toggle()?
    – gdoron
    Feb 7, 2012 at 19:08
  • @gdoron, mainly because I don't know if the #feedback <div> is really empty, and I interpreted the question as toggle all descendants. I might be wrong, though, I'll update my answer :) Feb 7, 2012 at 19:10
  • I think in this case you have to look at the actual outcome. If you toggle the immediate children, it will naturally toggle the children's children too since their parent elements will be toggled. Furthermore, the andSelf() makes the .find() irrelevant too since if the the divtotoggle is hidden, all of the children will be hidden too, thus making it irrelevant to toggle their display. However taking the question literally, this directly answers the question of how to select all elements within another element and toggle them regardless of performance.
    – Kevin B
    Feb 7, 2012 at 19:11
  • It doesn't matter, it will hide that "not empty" div with it's all descendants.
    – gdoron
    Feb 7, 2012 at 19:11
3

This should work:

$("#divtotoggle").children().toggle();
0
2

Toggle all the children:

$("#divtotoggle").children().toggle();

You might also be able to just toggle the div itself? If you are hiding all the children, this should do the same thing with less effort. I don't know your situation though...

$("#divtotoggle").toggle();
0

If you want to toggle a specific type of element, you could use:

$("#divToToggle.childToToggle").each ( function() { $(this).toggle(); } );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.