Show hidden element inside another element on click

Question

Follow-up on: How to get the children of the $(this) selector?

Does not work for me somehow.

html

  <h4>
    Sometext
    <h3>
      Another text
    </h3>
  </h4>

css

h3 {
    display: none;
}

js

$('h4').live('click', function() {
    $(this).children('h3').toggle('slide');
});

EDIT: There are multiple items like h4. http://jsfiddle.net/teKwN/4/

Please help. Thanks.

$('h3').toggle('slow'); - not the way, since there are multiple h4s and h3s — Alex G, Mar 03 '12 at 05:28

score 4 · Accepted Answer · answered Mar 03 '12 at 05:24

4

Your html is invalid so the browser tries to figure out what you meant. If you inspect element in chrome, you will see this:

<h4>
    Sometext
</h4>
<h3>
    Another text
</h3>

Because of that, your h4 has no children, so $(this).children('h3') returns no elements.

You will either need change that h3 to something else, or change your structure and the code to reflect the change.

http://jsfiddle.net/teKwN/3/

answered Mar 03 '12 at 05:24

James Montagne

77,516
14
110
130

It does have one child object. – Alex G Mar 03 '12 at 05:29
Try inspecting it in chrome, it has no child elements unless you count the text node. Chrome interprets it exactly as I have shown above. – James Montagne Mar 03 '12 at 05:29
- h3 is a child of h4, same
span is a child of div? – Alex G Mar 03 '12 at 05:33
Yes, but as I explained, `
` is invalid so the browser tries to figure out the most reasonable VALID way of interpreting it. Chrome comes up with what I posted above, which does not have any child in h4. I checked IE9 and it does the same. Don't nest headings. – James Montagne Mar 03 '12 at 05:35

score 0 · Answer 2 · answered Mar 03 '12 at 05:19

0

Not sure what the exact problem is, but nesting headers probably isn't a good idea. Reorganizing your HTML with the headers as siblings in a container element seems to fix it: http://jsfiddle.net/rjzaworski/sJe3g/

answered Mar 03 '12 at 05:19

rjz

16,182
3
36
35

score 0 · Answer 3 · answered Mar 03 '12 at 05:20

0

try

$('h3').toggle('slide');

instead of

$(this).children('h3').toggle('slide');

answered Mar 03 '12 at 05:20

t q

4,593
8
56
91

That "works" but will toggle every `h3` on the page, not just the one nested within the `h4` you clicked on. – James Montagne Mar 03 '12 at 05:27

score 0 · Answer 4 · answered Mar 03 '12 at 05:23

0

Check this it works fine

 $('h4').live('click', function() {
        $('h3').toggle('slow');
    });

answered Mar 03 '12 at 05:23

Sam Arul Raj T

1,752
17
23

Sure it does, but that would toggle every `h3` on the page. – James Montagne Mar 03 '12 at 05:25
is there any smart way to do that? child frame – Sam Arul Raj T Mar 03 '12 at 05:27
Yes, using `$(this)`, the way the original code does. The issue isn't in the jquery but in the html. – James Montagne Mar 03 '12 at 05:31

Show hidden element inside another element on click

4 Answers4

Linked