1

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

matchew
  • 19,195
  • 5
  • 44
  • 48

1 Answers1

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.

microspino
  • 7,693
  • 3
  • 48
  • 49
Tom Chandler
  • 642
  • 3
  • 9
  • then indeed it does. But now I need t reconsider some other things. Thanks, at least now I know why it was not working. – matchew May 11 '11 at 22:29
  • 1
    @matchw This post (http://stackoverflow.com/questions/1091322/how-to-fade-to-display-inline-block) suggests that you use custom animations to do fades if you need to have your containers display as blocks. – Tom Chandler May 11 '11 at 22:31