Question

I am trying to fade in a child element when a parent element is clicked using jQuery, but .children() does not seem to be accomplishing what I am trying to do.

I attempting to make the <h2> element fade in when the <h1> element is clicked.

Javascript:

$(document).ready(function() {
    $('h2').hide();
    $('h1').bind('click', function() {
        $(this).children().fadeIn(400);
    });
});

Here is my code:

HTML:

<h1>
Visible Parent
    <h2>
    Hidden Child
    </h2>
</h1>

A JSFiddle of the code can be fouind here: http://jsfiddle.net/jHkAB/5/

SOLVED:

By separating the <h1> and <h2> elements and then using .next() to select the element after the <h1> element, the next element fades in when the element before it is clicked.

A JSFiddle of the code can be found here: http://jsfiddle.net/bazmegakapa/jHkAB/16/.

Answer 1

Heading elements (h1, h2, etc.) cannot be contained in each other, so your HTML is normalized by the browser and becomes this:

<h1>
Visible Parent
</h1>
    <h2>
    Hidden Child
    </h2>

That is why you animation won’t trigger, because h2 is not a child of h1 anymore.