Question

fadeToggle is not working as I expected it to.

here is a sample fiddle: http://jsfiddle.net/JNu2q//

what I need to do is have more the element fade in, but all of the child elements

 <div id="happenings">
    <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3>
     <span class="ui-helper-hidden"><div class="more"> yadada</div></span>
    <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3>
        <span class="ui-helper-hidden">THINGS</span>
             <h3>Clicky<span class="ui-icon ui-icon-circle-triangle-e"></span></h3>
        <span class="ui-helper-hidden"">THINGS</span>
</div>
<script type="text/javascript">
$('#happenings>h3').click(function() {

   $(this).next('span').fadeToggle()
    $('span', this).toggleClass('ui-icon-circle-triangle-s'); 
}); 
</script>

as the fiddle shows the first item when click expands but doesn’t fade in nor does in contract.

This is a highly scaled down version of what I am trying to do. I am loading profiles into each via ajax. inside the span is some other elements. so of which expand and contract. In short, I need the span and its child div to fade in.

Thanks

Answer 1

This is your culprit

<div class="more"> yadada</div>

It looks like the div having a block display is messing with the fade in. If you change it to a span

<span class="more"> yadada</span>

or set it’s display to be inline (or inline-block)

<div class="more" style="display:inline;"> yadada</div>

Then it works.