javascript - Callback not working properly -

html

<div class="expand">     <span>▲</span> </div> 

js

$(".expand").click(function(){     if ($(this).children().text()=="▼") {         $(this).children().fadeout("fast",function(){             $(this).children().text("▲");         }); // callback?         $(this).children().fadein("fast"); //woks     } else {         $(this).children().fadeout("fast",function(){             $(this).children().text("▼");         }); // callback?         $(this).children().fadein("fast"); //works     };     $(this).parent().parent().find(".words, .readings").slidetoggle("fast"); //works }); 

i tried debugging putting alert('') in callback, nothing popped up, guess i'm making simple mistake here. basically, ▼ should fade out , when fades out (callback), should turn ▲, , fade in, that. pretty standard seen everywhere if ask me. or i'm doing wrong?

i'd prefer corrections on implementation different solutions, although they're welcome well.

inside of callback, this element want, $(this).children() returns empty object because <span> not have children. remove .children() callback:

$(this).children().fadeout("fast",function(){     $(this).text("▲"); });